<!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=gb2312" />
<title>自编的多个选项卡切换效果</title>
<style type="text/css">
body{background-color:#fff;}
.box{width: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{width: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;width:135px;padding-left:10px;}
.box dt.on{border:#DCECC0 1px solid;border-bottom:#FFF 1px solid;height:30px;font-weight:bold;}
</style>
</head>
<body>
<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>
<script type="text/javascript">
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="";}
}
}
function get_nextSibling(n){
var x=n.nextSibling;
while (x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
if (window.attachEvent){window.attachEvent("onload", tab);}else{window.addEventListener("load",tab,true);}
</script>
</body>
</html>