三款竖排选项卡

最新推荐文章于 2024-04-24 18:49:53 发布
最新推荐文章于 2024-04-24 18:49:53 发布
阅读量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 全部选择 提示：你可先修改部分代码，再按运行]
maji9370
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-tab容器-竖直切换特效-源码
09-24
HTML网页中，常常需要使用tab栏目切换来展示更多的内容，这个源码文件为竖直方向tab切换动画特效样式，复制粘贴即可使用，大大节省开发时间
html 纵向选项卡,竖直选项卡式面板的实现_html/css_WEB-ITnose
weixin_36293258的博客
05-31 1152
前面的话：我是html的初学者，懂得一些html的基本知识。最近开始学css，不会JavaScript。了解到adobe dw cs5的插入->spry有选项卡式面板的设计，对这个很感兴趣。但是发现默认的是tab水平排列在上面的。然而多数网站都是tab竖直排列在网页的左端。于是开始寻找修改spry插入的选项卡面板，以适应需求。考虑到spry默认生成的选项卡式面板网页里已经包含了垂直的样式，但...
HTML+CSS竖向图文选项卡
07-10
HTML和CSS实现竖向图文选项卡，简单易懂，你值得拥有！
PYQT5使用Qt Designer中的Tab Widget实现窗口切换并更改Tab为竖向排列
最新发布
weixin_61370728的博客
04-24 625
更改tab为竖向排列(West为左边，East为右边)更改界面样式表，调整tab大小（根据需求微调）将Tab Widget控件拖入主窗口。在属性中编辑标签名称。鼠标右键插入新标签页。
html中竖的tab面板,CSS+JS 实现的横向与竖向Tab
weixin_39667398的博客
06-24 561
简明现代魔法 -> CSS层叠样式表 -> CSS+JS 实现的横向与竖向TabCSS+JS 实现的横向与竖向Tab2010-02-02效果演示CSS 代码body{ padding:0;font:12px "宋体"; }/*选项卡1*/#lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overfl...
javascript横排竖排标准选项卡效果代码
10-30
从提供的文件信息中，我们可以提炼出关于“javascript横排竖排标准选项卡效果代码”的相关知识点，下面将详细说明这些知识点。 首先，横排竖排标准选项卡是网页设计中常见的交互组件，用于在有限的屏幕上展示更多的...
tab选项卡竖排
09-10
完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。 完全仿照天猫网站实现的各种jquery前台特效，各个模块下载。
JQuery Tab_JQuery竖排选项卡代码示例
02-07
在这个“JQuery Tab_JQuery竖排选项卡代码示例”中，我们将探讨如何利用JQuery 1.4.4实现垂直排列的选项卡功能。 首先，让我们了解JQuery的基本用法。JQuery通过$函数作为入口，允许开发者选择HTML元素并对其进行...
javascript横排竖排标准选项卡效果代码.docx
01-13
3. **竖排选项卡**：选项卡标签垂直排列。 4. **结构/样式/行为分离**：一种最佳实践方法，将网页的结构、样式和行为独立开来，便于维护和扩展。 #### 三、技术细节 ##### 3.1 HTML 结构 HTML 结构是选项卡的基础...
超级好看的格子选项卡
01-12
4. **可配置选项**：支持设置选项卡的数量、布局模式（横排或竖排）、是否自动轮播等。 5. **事件处理**：允许绑定点击事件，实现自定义的回调函数，以进行数据处理或触发其他操作。 6. **兼容性**：与主流的浏览器...
垂直选项卡竖版选项卡切换文字列表源码下载
11-22
垂直选项卡竖版选项卡切换文字列表源码下载
简洁的bootstrap垂直tab选项卡
12-10
这是一款简洁的bootstrap垂直tab选项卡。该选项卡在bootstrap原有的选项卡插件的基础上，通过添加一些css样式，将它显示为垂直的选项卡。
简洁css竖型tab选项卡(用)
GoodShot的专栏
08-12 6580
1. 以下是程序代码 网页特效 简洁css竖型tab选项卡 站长特效网 <!-- body{ padding:0;font:12px "宋体"; } /*选项卡1*/ #lib_wwwzzjsnet{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} /*
html 纵向选项卡,简单竖向Tab选项卡
weixin_33817338的博客
05-31 1062
*{ padding:0;margin: 0;}.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}#mytab ...
html横向选项卡 js,JS实现横向与竖向两个选项卡Tab联动的方法
weixin_35665083的博客
06-03 471
本文实例讲述了JS实现横向与竖向两个选项卡Tab联动的方法。分享给大家供大家参考。具体如下：这是一款横向、竖向联动的选项卡，其卡片内容是一样的，只不过多了一个操作途径，当点击一个选项卡的时候，另一个选项卡同样会指示出当的选项卡位置，也就是两者的功能是相同的，很巧妙的布局方法。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DT...
html+css实现选项卡功能 【转】
MY_People_1993的博客
03-28 298
<!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> &lt...
HTML5+CSS3+JS小实例：简约的垂直选项卡
艾恩小灰灰的博客
06-02 255
字体图标库：font-awesome。技术栈：HTML+CSS+JS。实例：简约的垂直选项卡。
CSS实现横向、竖向两个选项卡联动_网页代码站(www.webdm.cn)
weixin_34195142的博客
12-23 203
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> ...
HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；...
weixin_30745553的博客
11-10 461
1，竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-h...
InDesign 制作竖排古籍教程详解
进入工作界面后，识别各个关键区域：菜单栏、设置选项卡、工具面板和面板组。版芯是我们将放置文字的区域。使用矩形工具在版芯左上角绘制一个矩形，并确保它与版芯的边界对齐。选择矩形后，可以更改其边线的粗细，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值