[CSS+JS]同一页面可以重复使用的选项卡（2）

如此定义的好处是，选项卡的选项和其内容是关联的，当没有加载CSS的时候，其显示如图2所示。

无CSS时选项卡的显示结构也很清晰

其中第一层的<li>的类名“tabOption”是标示这个<li>是选项，以却别内容里的<li>，类名“tabOn”则表示这个选项卡是打开的（即鼠标的:hover状态）。“<div class=”tabContentBox”>”为放置选项卡具体内容的层，通过CSS控制其显示或隐藏，关键的CSS为：

.tabList .tabContentBox {
width: 390px;
height:130px;
border:1px solid #069;
text-align: left;
overflow: hidden;
background: #fff;
position: absolute;
top: 22px;
left: 0;
display: none;
margin:4px;
}

先设定内容层为“display: none”，即不显示，则浏览器会忽略此元素和其子孙元素，元素也不占位。然后对于“tabOption”的:hover设定CSS如下：

.tabList .tabOption:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display: block;
}

此时，在IE 7/8、Firefox 3.0等浏览器内，已经可以实现指向选项卡时显示相应内容的效果。但是，由于IE 6只支持链接<a>元素的:hover伪类，因此还需要JavaScript来兼容IE 6，同时，“:hover”状态当鼠标移出选项的时候就消失了，因此不便于浏览，所以也需要JavaScript来控制，设定当鼠标指向某个选项时，此选项的内容一直显示，即增加“tabOn”。JavaScript代码如下：

<script type="text/javascript" language="javascript"><!--window.onload = tabEffect;function tabEffect(){ var allElements = document.getElementsByTagName('*'); for (var i=0; i<allElements.length; i++) {  if (allElements[i].className.indexOf('tabOption') >= 0)  {   allElements[i].onmouseover = mouseOver;  } }}function mouseOver(){    tabList = this.parentNode;    tabOptions = tabList.getElementsByTagName("li"); for (var i=0; i<tabOptions.length; i++) {     if (tabOptions[i].className.indexOf('tabOption') >= 0)  {      tabOptions[i].className = "tabOption";  } } this.className += " tabOn";}--></script>

至此，选项卡制作完毕，此方法与其他方法不同的地方是，可以在页面内不同位置放置多个选项卡也不会冲突，同时只需要此一段JavaScript程序即可。