js tab嵌套切换-阿里云开发者社区

js tab嵌套切换

2017-11-14 1001

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

自己整理的一个：js tab嵌套切换

<!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=GBK" />
<style>
#tab_zzjs_net{
width:400px;
height:auto;
margin:0 auto;
position:relative;
}
ul{
list-style:none;
margin-left:20px;
}
li{
float:left;
height:30px;
background:url(/img/tr2_20110117zzjs_net.jpg);
margin:0 5px;
text-align:center;
line-height:30px;
color:#293863;
width:60px;
position:relative;
bottom:-3px;
}
.dise{
display:block;
}
.undise{
display:none;
}
.fff{
background:#f99;
}
.wwwzzjsnet{
clear:left;
width:400px;
}
.wwwzzjsnet div{
width:400px;
background-color:#F2F5FA;
text-align:left;
line-height:20px;
height:200px;
border:1px #CCCDCD solid;
}
#zzjs{
position:absolute;
top:40px;
}
</style>
</head>
<script language="javascript">
function g(o){return document.getElementById(o);}
function show_zzjs_net(i){
for(j=1;j<=3;j++){
g("zzjs_net"+j).className="undise"
g("zzjs"+j).className=""
}
g("zzjs_net"+i).className="dise"
g("zzjs"+i).className="fff"
}
function show_zzjs_1(i){
for(j=4;j<=12;j++){
g("zzjs_net"+j).className="undise"
g("zzjs"+j).className=""
}
g("zzjs_net"+i).className="dise"
g("zzjs"+i).className="fff"
}
</script>
<body>
<div id="tab_zzjs_net">
<ul>
<li id="zzjs1" class="fff"><span onmouseover="show_zzjs_net(1)">一区</span></li>
<li id="zzjs2"><span onmouseover="show_zzjs_net(2)">二区</span></li>
<li id="zzjs3"><span href="#" onmouseover="show_zzjs_net(3)">三区</span></li>
</ul>
<div class="wwwzzjsnet">
<div id="zzjs_net1" class="dise">
<div id="zzjs">
<ul >
<li id="zzjs4" class="fff"><span onmouseover="show_zzjs_1(4)">一区a</span></li>
<li id="zzjs5"><span onmouseover="show_zzjs_1(5)">一区b</span></li>
<li id="zzjs6"><span href="#" onmouseover="show_zzjs_1(6)">一区c</span></li>
</ul>
<div class="wwwzzjsnet">
<div id="zzjs_net4" class="dise">一区a内容</div>
<div id="zzjs_net5" class="undise">一区b内容</div>
<div id="zzjs_net6" class="undise">一区c内容</div>
</div>
</div>
</div>
<div id="zzjs_net2" class="undise">
<div id="zzjs">
<ul >
<li id="zzjs7" class="fff"><span onmouseover="show_zzjs_1(7)">二区a</span></li>
<li id="zzjs8"><span onmouseover="show_zzjs_1(8)">二区b</span></li>
<li id="zzjs9"><span href="#" onmouseover="show_zzjs_1(9)">二区c</span></li>
</ul>
<div class="wwwzzjsnet">
<div id="zzjs_net7" class="dise">二区a内容</div>
<div id="zzjs_net8" class="undise">二区b内容</div>
<div id="zzjs_net9" class="undise">二区c内容</div>
</div>
</div>
</div>
<div id="zzjs_net3" class="undise">
<div id="zzjs">
<ul >
<li id="zzjs10" class="fff"><span onmouseover="show_zzjs_1(10)">三区a</span></li>
<li id="zzjs11"><span onmouseover="show_zzjs_1(11)">三区b</span></li>
<li id="zzjs12"><span href="#" onmouseover="show_zzjs_1(12)">三区c</span></li>
</ul>
<div class="wwwzzjsnet">
<div id="zzjs_net10" class="dise">三区a内容</div>
<div id="zzjs_net11" class="undise">三区b内容</div>
<div id="zzjs_net12" class="undise">三区c内容</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>