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   id="70qarhlowxag"   class="cwdn">	<div   id="70qarhlowxag"   class="nav">		<ul>		<li id="70qarhlowxag"    class="on" id="tb_11" onclick="HoverLi(1,1,3);">特效</li>		<li id="70qarhlowxag"    class="" id="tb_12" onclick="HoverLi(1,2,3);">源碼</li>		<li id="70qarhlowxag"    class="" id="tb_13" onclick="HoverLi(1,3,3);">書籍</li>		</ul>	</div>	<div   id="70qarhlowxag"   class="dis" id="tbc_11"><div   id="70qarhlowxag"   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   id="70qarhlowxag"   class="undis" id="tbc_12"><div   id="70qarhlowxag"   class="main">	<ul><li>CSS實現鼠標移上黑白圖片變成彩色的特效</li>        <li>半透明的鏈接提示特效</li>        <li>仿FLASH指定區域文字漂浮效果</li>        <li>一款老外全兼容的鼠標懸停提示特效</li>        <li>仿QQ的點擊鏈接彈出提示層的效果</li>                     </ul>	</div></div>	<div   id="70qarhlowxag"   class="undis" id="tbc_13"><div   id="70qarhlowxag"   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實現的滑動門