自己整理的一个: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><!-- end 一区 -->
- <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><!-- end 二区 -->
- <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><!-- end 三区 -->
- </div>
- </div>
- </body>
- </html>
网上找个功能更强:
下载下面附件:
本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/997728,如需转载请自行联系原作者