三款竖排选项卡

最新推荐文章于 2018-12-27 17:00:00 发布
最新推荐文章于 2018-12-27 17:00:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： JavaScript&CSS 文章标签： class function xhtml div html border

三款竖排选项卡，第一款来自网络，第二和第三款是自己在第一款的基础上做的修改，很不错的 ，比较实用，发出来给大家分享，样式你也可以在这个的基础上去修改，很方便的！
第一款代码：

程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>竖排的选项卡</title>
<meta name="keywords" content="网页选项卡,TAB选项卡,竖排网页选项卡,竖排TAB选项卡" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.main{border:1px solid #256bae;width:336px;height:160px;padding:5px;overflow:hidden;float:left;}
.news{position:absolute;z-index:100;margin:8px 0 0 348px;width:24px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{border-top:1px solid #256bae;border-right:1px solid #256bae;border-bottom:1px solid #256bae;height:60px;width:20px;margin-bottom:10px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle;padding-bottom:5px;}
.news ul li.on{border-left:1px solid #fff;}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
</script>
</head>
<body>
<strong>兼容IE6/IE7/FF</strong><br><br>
<div id="http://www.gzink.com">
    <div class="news">
        <ul>
            <li class="on" id="tb_11" οnmοuseοver="HoverLi(1,1,2);">企业新闻</li>
            <li class="" id="tb_12" οnmοuseοver="HoverLi(1,2,2);">业内咨讯</li>
            
        </ul>
    </div>
    <div class="dis" id="tbc_11">
        <div class="main">
        企业新闻的内容<br>企业新闻的内容<br>企业新闻的内容<br>企业新闻的内容
        </div>
    </div>
    <div class="undis" id="tbc_12">
        <div class="main">
        业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>
        </div>
    </div>
    
</div>
</body>
</html>


第一款演示：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


第二款代码：

程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖排的选项卡</title>
<meta name="keywords" content="网页选项卡,TAB选项卡,竖排网页选项卡,竖排TAB选项卡" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-right:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
</script>
</head>
<body>
<strong>演变！！！兼容IE6/IE7/FF/opera</strong><br><br>
<div class="warp">
    <div class="news">
        <ul>
            <li class="on" id="tb_11" οnmοuseοver="HoverLi(1,1,3);"><span>企业新闻</span></li>
            <li class="" id="tb_12" οnmοuseοver="HoverLi(1,2,3);"><span>业内咨讯</span></li>
            <li class="" id="tb_13" οnmοuseοver="HoverLi(1,3,3);"><span>业内咨讯</span></li>
        </ul>
    </div>
<div class="dis" id="tbc_11">
        <div class="main">
        1<br>企业新闻的内容<br>企业新闻的内容<br>企业新闻的内容
    </div>
    </div>
    <div class="undis" id="tbc_12">
        <div class="main">
        2<br>业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>
        </div>
    </div>
        <div class="undis" id="tbc_13">
        <div class="main">
        3<br>业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>
        </div>
    </div>
    
</div>
</body>
</html>


第二款演示：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


第三款代码：

程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖排的选项卡</title>
<meta name="keywords" content="网页选项卡,TAB选项卡,竖排网页选项卡,竖排TAB选项卡" />
<style type="text/css">
body{font-size:12px;font-family:"Lucida Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}
.warp{width:586px; height:269px !important; height:271px;border:1px solid #dbdcd7;}
.main{width:562px; height:269px !important;height:271px;padding:5px; margin-left:15px;overflow:hidden;float:left;}
.news{position:absolute;z-index:4;width:24px; float: left; margin-left:565px !important; margin-left:582px;}
.news ul{list-style:none;padding:0;margin:0;}
.news ul li{ height:84px !important;height:88px;width:20px;margin-bottom:0px;padding-top:5px;text-align:center;cursor:pointer;;vertical-align:middle; background-color:#e5e5e5; border-left:#dbdcd7 solid 1px;border-bottom:#dbdcd7 solid 1px;}
.news ul li.on{background-color:#ffffff; border:#FFFFFF 0px}
.news span{display:block; margin-top:9px !important; margin-top:20px;}
.dis{display:block;}
.undis{display:none;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(m,n,counter){for(var i=1;i<=counter;i++){g('tb_'+m+i).className='';g('tbc_'+m+i).className='undis';}g('tbc_'+m+n).className='dis';g('tb_'+m+n).className='on';}
</script>
</head>
<body>
<strong>演变！！兼容IE6/IE7/FF/opera</strong><br><br>
<div class="warp">
    <div class="news">
        <ul>
            <li class="on" id="tb_11" οnmοuseοver="HoverLi(1,1,3);"><span>企业新闻</span></li>
            <li class="" id="tb_12" οnmοuseοver="HoverLi(1,2,3);"><span>业内咨讯</span></li>
            <li class="" id="tb_13" οnmοuseοver="HoverLi(1,3,3);"><span>业内咨讯</span></li>
        </ul>
    </div>
<div class="dis" id="tbc_11">
        <div class="main">
        1<br>企业新闻的内容<br>企业新闻的内容<br>企业新闻的内容
    </div>
    </div>
    <div class="undis" id="tbc_12">
        <div class="main">
        2<br>业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>
        </div>
    </div>
        <div class="undis" id="tbc_13">
        <div class="main">
        3<br>业内咨讯的内容<br>业内咨讯的内容<br>业内咨讯的内容<br>
        </div>
    </div>
    
</div>
</body>
</html>


第三款演示：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
tab选项卡竖排
09-10
完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。 完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。
竖排的选项卡
\\\布谷鸟///的专栏
03-02 2634
竖排的选项卡
HTML+CSS竖向图文选项卡
07-10
HTML和CSS实现竖向图文选项卡，简单易懂，你值得拥有！
竖向简洁的标签选项卡 两个
07-15
竖向简洁的标签选项卡 一个页面兼容两个tabs选项卡。修改的时候，可以修改id，这样一个页面可以支持多个
竖排
wayne17的博客
08-06 408
图片分享
javascript横排竖排标准选项卡效果代码
10-30
从提供的文件信息中，我们可以提炼出关于“javascript横排竖排标准选项卡效果代码”的相关知识点，下面将详细说明这些知识点。 首先，横排竖排标准选项卡是网页设计中常见的交互组件，用于在有限的屏幕上展示更多的...
javascript横排竖排标准选项卡效果代码.docx
01-13
3. **竖排选项卡**：选项卡标签垂直排列。 4. **结构/样式/行为分离**：一种最佳实践方法，将网页的结构、样式和行为独立开来，便于维护和扩展。 #### 三、技术细节 ##### 3.1 HTML 结构 HTML 结构是选项卡的基础...
JQuery Tab_JQuery竖排选项卡代码示例
02-07
在这个“JQuery Tab_JQuery竖排选项卡代码示例”中，我们将探讨如何利用JQuery 1.4.4实现垂直排列的选项卡功能。 首先，让我们了解JQuery的基本用法。JQuery通过$函数作为入口，允许开发者选择HTML元素并对其进行...
JQuery竖排Tab选项卡完整代码示例下载
本知识点将详细解读使用 jQuery 实现竖排选项卡（Tab）的代码示例，重点在于如何通过 jQuery 代码来控制选项卡的内容切换和样式变换。 ### 竖排选项卡实现原理 竖排选项卡实现的基本原理是通过 JavaScript（在本例...
Amaze js插件 选项卡竖置
zoujiawei6的博客
03-03 2055
首先你得有Amaze框架：http://amazeui.org/getting-started 以下代码只供参考。 css：   &lt;style type="text/css"&gt; .am-nav-ver{ float:left; } .am-nav-ver&gt;li{ float:none; } .am-tabs{ overflow:hidden;/*父...
HTML实现Tab选项卡（自动+手动）
03-06
tab选项卡是常见的网页效果，也叫滑动门特效，本资源实现自动调转和手动（click onmouseover）切换
Easyui tabs 标题居左，文字竖着
07-21
Easyui tabs 标题居左，文字竖着
js简单实现竖向tab选项卡的方法
10-24
主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下
简洁的bootstrap垂直tab选项卡
12-10
这是一款简洁的bootstrap垂直tab选项卡。该选项卡在bootstrap原有的选项卡插件的基础上，通过添加一些css样式，将它显示为垂直的选项卡。
利用 table 实现垂直选项卡
05-28
NULL 博文链接：https://yarafa.iteye.com/blog/709326
简洁css竖型tab选项卡(用)
GoodShot的专栏
08-12 6710
1. 以下是程序代码 网页特效 简洁css竖型tab选项卡 站长特效网 <!-- body{ padding:0;font:12px "宋体"; } /*选项卡1*/ #lib_wwwzzjsnet{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} /*
BootStrap实现左侧或右侧竖式tab选项卡
w1366352655的博客
12-27 1819
BootStrap实现左侧或右侧竖式tab选项卡 BootStrap实现左侧或右侧竖式tab选项卡 代码如下： &amp;lt;div style="height: 100px;"&amp;gt; &amp;lt;div class="col-xs-2"&amp;gt; &amp;lt;ul class="nav nav-...
设置tabcontrol控件选项卡的字体为竖着的。
闵峰的专栏
06-27 2475
Private tabArea As Rectangle    Private tabTextArea As RectangleF     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load        Me.TabControl1.DrawM
如何使tabcontrol选项卡上的字体设置为竖着显示(c#,VS2005,winform)
tmxkprc的专栏
01-05 3933
    如果非要弄得话，可以通过用图片的方法做。在form中添加一个imagelist控件，选择你合适的图片（图片可以自己做，下一个绘图工具就行了，比如isee，ACD等等），图片的大小等可以在它的属性框中调整。再选中tabcontrol查看属性，在imagelist属性下选择那个控件，再选择tabpages属性，点右面的那个按钮编辑tabpage，在弹出的对话框中选择imageindex属性，点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值