继上一篇利用 table 实现垂直选项卡,这里用另一种方式实现水平选项卡。
1. 样式定义
/** * 说明:选项卡的样式 */ .tabset a:link,a:visited { font-size:12px; color:#666; text-decoration:none; } .tabset a:hover { color:#ff0000; text-decoration:underline; } #Tab { margin:0 auto; width:100%; height:100%; border:1px solid #64B8E4; } .Menubox { height:50px; border-bottom:1px solid #64B8E4; background:#d6f2fe; } .Menubox ul { list-style:none; margin:7px 5px; padding:0; position:absolute; } .Menubox ul li { float:left; background:#64B8E4; line-height:42px; display:block; cursor:pointer; width:120px; text-align:center; color:#fff; font-size: 14px; font-weight:bold; border-top:1px solid #64B8E4; border-left:1px solid #64B8E4; border-right:1px solid #64B8E4; background-image:url(../image/bg-tabset.jpg); } .Menubox ul li.hover { background:#fff; border-bottom:1px solid #fff; color:#147AB8; } .Contentbox { clear:both; margin-top:0px; border-top:none; height:181px; padding-top:8px; height:100%; } .Contentbox ul { list-style:none; margin:7px; padding:0; } .Contentbox ul li { line-height:24px; border-bottom:1px dotted #ccc; }
2. 选项卡内容定义
<div id="Tab" class="tabset" style="width: 600px; height: 300px;">
<div class="Menubox">
<ul>
<li id="menu1" οnmοuseοver="displayAndHide('menu',1,4)" class="hover">【内容一】</li>
<li id="menu2" οnmοuseοver="displayAndHide('menu',2,4)">【内容二】</li>
<li id="menu3" οnmοuseοver="displayAndHide('menu',3,4)">【内容三】</li>
<li id="menu4" οnmοuseοver="displayAndHide('menu',4,4)">【内容四】</li>
</ul>
</div>
<div class="Contentbox">
<div id="content1" class="hover" align="left" style="margin: 0px 5px 5px 5px">
<ul>
<li>·<a href="#">请在这里添加其他内容</a></li>
</ul>
</div>
<div id="content2" align="left" style="margin: 0px 5px 5px 5px; display: none">
</div>
<div id="content3" align="left" style="margin: 0px 5px 5px 5px; display: none">
<ul>
<li>·<a href="#">请在这里添加其他内容</a></li>
</ul>
</div>
<div id="content4" align="left" style="margin: 0px 5px 5px 5px; display: none">
<ul>
<li>·<a href="#">请在这里添加其他内容</a></li>
</ul>
</div>
</div>
</div>
3. JS 函数定义
/** * @param name - 选项卡菜单的部分名称 * @param index - 当前选项卡的索引号 * @param count - 选项卡的数目 */ function displayAndHide(name, index, count) { for(var i = 1;i <= count; i++) { var menu = document.getElementById(name + i); var content = document.getElementById("content" + i); menu.className = i == index ? "hover" : ""; content.style.display = i == index ? "block" : "none"; } }
4. 效果预览
结合前一篇利用 table 实现垂直选项卡,水平选项卡和垂直选项卡组合起来可以实现下面的效果。
5. Demo 下载
附件 demo,欢迎下载。
-------------------------------------------------
Stay Hungry, Stay Foolish!
Afa
July 9th, 2010
-------------------------------------------------