CSS竖排选项卡Tab

2024-09-05 12:19:28

字体：大中小

来源：转载

供稿：网友

横排的选项卡你见得非常多，有时候用一个竖向排列的选项卡让浏览者也换换口味，感觉很新鲜，而且这个选项卡在IE6/IE7/IE8/FF都有很好的兼容性，非常不错哦。

<!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><style type="text/css">body{font-size:14px;font-family:Verdana;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#256bae;}.main{border:4px solid #256bae;width:336px;height:220px;padding-left:5px;overflow:hidden;float:left;}.nav{position:absolute;z-index:100;margin:15px 0 0 345px;width:24px;}.nav ul{list-style:none;padding:0;margin:0;}.nav ul li{border:4px solid #256bae;width:20px;margin:5px auto;text-align:center;cursor:pointer;}.nav ul li.on{border-left:4px 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><div class="cwdn">	<div class="nav">		<ul>		<li class="on" id="tb_11" onclick="HoverLi(1,1,3);">特效</li>		<li class="" id="tb_12" onclick="HoverLi(1,2,3);">源码</li>		<li class="" id="tb_13" onclick="HoverLi(1,3,3);">书籍</li>		</ul>	</div>	<div class="dis" id="tbc_11"><div class="main">	<ul>        <li>单行的JS文字滚动条</li>        <li>JS控制一个DIV层在指定时间内消失</li>        <li>可自由拖动的DIV层方块</li>        <li>CSS+JS可伸缩展开的文章列表</li>        <li>JS实现表格单元格拖动排序</li>        <li>CSS实现带滚动条的表格</li>                     </ul>                     </div></div>	<div class="undis" id="tbc_12"><div class="main">	<ul><li>CSS实现鼠标移上黑白图片变成彩色的特效</li>        <li>半透明的链接提示特效</li>        <li>仿FLASH指定区域文字漂浮效果</li>        <li>一款老外全兼容的鼠标悬停提示特效</li>        <li>仿QQ的点击链接弹出提示层的效果</li>                     </ul>	</div></div>	<div class="undis" id="tbc_13"><div class="main"><ul><li>《Java与模式》PDF</li>        <li>《Java2核心技术卷1:基础知识》 PDF</li>        <li>《Java2核心技术卷2:高级特性》 PDF</li>        <li>《J2EE服务器端高级编程》全书(PDF)</li>        <li>《Java P2P技术内幕》中文PDF全书</li>        <li>《Java GUI程序设计基础》教程PDG</li>        </ul></div></div></div></body></html>

上一篇：超级酷黑色网站导航菜单

下一篇：JS+Table实现的滑动门

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注