[分享]多个选项卡切换效果

实现的效果图：

鼠标经过选项卡，弹出相对应的内容，选项卡个数不限；
1.html

<div class="box" id="box">
    <dl>
        <dt class="on"><a href="#">六一儿童节快乐</a></dt>
        <dt><a href="#">快乐</a></dt>
    </dl>
    <div>
    <ul style="display:block;">
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">哮喘</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
    </ul>
    <ul>
        <li><a href="#">儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">儿童节快乐 </a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
    </ul>
    </div>
    <dl>
        <dt>儿童节快乐</dt>
        <dt>儿童节快乐</dt>
    </dl>
    <div>
    <ul>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
    </ul>
    <ul>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
        <li><a href="#">六一儿童节快乐</a></li>
    </ul>
    </div>
    <div style="clear:both;"></div>
</div>

2.css

body{background-color:#fff;}
.box{318px; border:#C5D7A5 1px solid; padding-bottom:20px;}
.box div{padding:0 8px;}
.box a{color:#333; font-size:12px; text-decoration:none;}
.box a:hover{text-decoration:underline;}
.box ul,.box dl{margin:0; padding:0; line-height:25px; clear:both;}
.box dt{141px; height:25px; line-height:25px;text-align:center;border:#EBEAEB 1px solid; 
margin:0 8px;font-size:12px;float:left;display:inline; position:relative;bottom:-1px;
margin-top:5px;cursor:pointer;}
.box ul{border:#DCECC0 1px solid; float:left;padding:5px 0 5px 10px;display:none;}
.box ul li{list-style:none;float:left;135px;padding-left:10px;}
.box dt.on{border:#DCECC0 1px solid;border-bottom:#FFF 1px solid;height:30px;font-weight:bold;}

css定位应该注意到地方：

1.  .box dt 需要给其加float：left；才能使dt标签位于一行当中，这里需要给其加上display：inline；才能保证ie6.0下显示正常；
2.  dt标签卡跟下面的内容框是有间隙的，但当前选项卡应该跟其内容框融为一体，让用户更容易捕捉信息内容，需要让上面的标签卡往下移动1像素, 这用到了相对定位position:relative;bottom:-1px;
3. 当前选项卡加类 dt.on  改变其下边框的颜色border-bottom:#FFF 1px solid;下边框颜色值根据设计需求来定，因为背景色是白色，所以这里也使用白色，目的是让选项卡跟其对应的内容框融为一体；

4.给类dt.on 加一个高度 height：30px；当前选项卡会将内容框压下去，内容框便跟相邻的非当前选项卡出现30-25=5个像素的间距，基本达到了设计要求；

5.这里有个很奇怪地方，直接给ul 加display：none； 页面显示就会出现明显的错误，或者说display：none根本没在ul上实现隐藏的作用；解决办法是给ul加浮动float：left；这是定位的关键之一；

 

3.js代码

 

var box=document.getElementById("box");
function tab(){
    var dllist=box.getElementsByTagName("dl")
    for(i=0;i<dllist.length;i++){
        var dtlist=dllist[i].getElementsByTagName("dt");
        //alert(dtlist.length)
          for(j=0;j<dtlist.length; j++){(//***//
           function(n)
           { 
           // dtlist[j].className="";
            dtlist[j].onmouseover=function(){
                //var parentdt=this.parentNode
                var con_div=get_nextSibling(this.parentNode)
                //alert(con_div.nodeName);
                var ullist=con_div.getElementsByTagName("ul");
                //alert(ullist.length);
                //alert(n) 弹出元素在其元素列表或数组中所处的位置编号或下标号，据此来判断选项卡对应的信息内容块；
                allbox();
                this.className="on";
                ullist[n].style.display="block"
                }
            }
           )(j);
         }
    }
function allbox(){
    var allul=box.getElementsByTagName("ul")
    var dtlist=box.getElementsByTagName("dt")
    for(x=0,y=0;x<allul.length,y<dtlist.length;x++,y++)
{allul[x].style.display="none";dtlist[y].className="";}
    }//这里有两个for循环，变量，表达式，条件，要一一对应好
}
//获取下一个节点；
function get_nextSibling(n){
var x=n.nextSibling;
while (x.nodeType!=1){
   x=x.nextSibling;
}
return x;
}
//加载函数tab，window.attachEvent 只有IE可以识别，以此来判断IE和非IE浏览器，因为两者绑定事件的方法有所不同；
if (window.attachEvent){window.attachEvent("onload", tab);//IE下加载}
else{window.addEventListener("load",tab,true);//非IE下绑定事件}