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

开发者社区> 开发与运维> 正文

js tab嵌套切换

简介:

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

 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <style> 
  6. #tab_zzjs_net{ 
  7.     width:400px; 
  8.     height:auto; 
  9.     margin:0 auto; 
  10.     position:relative; 
  11. ul{ 
  12.     list-style:none; 
  13.     margin-left:20px; 
  14. li{ 
  15.     float:left; 
  16.     height:30px; 
  17.     background:url(/img/tr2_20110117zzjs_net.jpg); 
  18.     margin:0 5px; 
  19.     text-align:center; 
  20.     line-height:30px; 
  21.     color:#293863; 
  22.     width:60px;  
  23.     position:relative; 
  24.     bottom:-3px; 
  25. .dise{ 
  26.     display:block; 
  27. .undise{ 
  28.     display:none; 
  29. .fff{ 
  30.     background:#f99; 
  31. .wwwzzjsnet{ 
  32.     clear:left; 
  33.     width:400px; 
  34. .wwwzzjsnet div{ 
  35.     width:400px; 
  36.     background-color:#F2F5FA; 
  37.     text-align:left; 
  38.     line-height:20px; 
  39.     height:200px; 
  40.     border:1px #CCCDCD solid; 
  41. #zzjs{ 
  42.     position:absolute; 
  43.     top:40px; 
  44. </style> 
  45. </head> 
  46. <script  language="javascript"> 
  47. function g(o){return document.getElementById(o);} 
  48. function show_zzjs_net(i){ 
  49.     for(j=1;j<=3;j++){ 
  50.         g("zzjs_net"+j).className="undise" 
  51.         g("zzjs"+j).className="" 
  52.     } 
  53.     g("zzjs_net"+i).className="dise" 
  54.     g("zzjs"+i).className="fff" 
  55. function show_zzjs_1(i){ 
  56.     for(j=4;j<=12;j++){ 
  57.         g("zzjs_net"+j).className="undise" 
  58.         g("zzjs"+j).className="" 
  59.     }  
  60.     g("zzjs_net"+i).className="dise" 
  61.     g("zzjs"+i).className="fff" 
  62. }  
  63. </script> 
  64. <body> 
  65.  
  66. <div id="tab_zzjs_net"> 
  67.     <ul> 
  68.         <li id="zzjs1" class="fff"><span onmouseover="show_zzjs_net(1)">一区</span></li> 
  69.         <li id="zzjs2"><span onmouseover="show_zzjs_net(2)">二区</span></li> 
  70.         <li id="zzjs3"><span href="#" onmouseover="show_zzjs_net(3)">三区</span></li> 
  71.     </ul> 
  72.     <div class="wwwzzjsnet"> 
  73.         <div id="zzjs_net1" class="dise"> 
  74.             <div id="zzjs"> 
  75.                 <ul > 
  76.                     <li id="zzjs4" class="fff"><span onmouseover="show_zzjs_1(4)">一区a</span></li> 
  77.                     <li id="zzjs5"><span onmouseover="show_zzjs_1(5)">一区b</span></li> 
  78.                     <li id="zzjs6"><span href="#" onmouseover="show_zzjs_1(6)">一区c</span></li> 
  79.                 </ul> 
  80.                 <div class="wwwzzjsnet"> 
  81.                     <div id="zzjs_net4" class="dise">一区a内容</div> 
  82.                     <div id="zzjs_net5" class="undise">一区b内容</div> 
  83.                     <div id="zzjs_net6" class="undise">一区c内容</div> 
  84.                 </div> 
  85.             </div> 
  86.         </div><!-- end 一区 --> 
  87.         <div id="zzjs_net2" class="undise"> 
  88.             <div id="zzjs"> 
  89.                 <ul > 
  90.                     <li id="zzjs7" class="fff"><span onmouseover="show_zzjs_1(7)">二区a</span></li> 
  91.                     <li id="zzjs8"><span onmouseover="show_zzjs_1(8)">二区b</span></li> 
  92.                     <li id="zzjs9"><span href="#" onmouseover="show_zzjs_1(9)">二区c</span></li> 
  93.                 </ul> 
  94.                 <div class="wwwzzjsnet"> 
  95.                     <div id="zzjs_net7" class="dise">二区a内容</div> 
  96.                     <div id="zzjs_net8" class="undise">二区b内容</div> 
  97.                     <div id="zzjs_net9" class="undise">二区c内容</div> 
  98.                 </div> 
  99.             </div> 
  100.         </div><!-- end 二区 --> 
  101.         <div id="zzjs_net3" class="undise"> 
  102.             <div id="zzjs"> 
  103.                 <ul > 
  104.                     <li id="zzjs10" class="fff"><span onmouseover="show_zzjs_1(10)">三区a</span></li> 
  105.                     <li id="zzjs11"><span onmouseover="show_zzjs_1(11)">三区b</span></li> 
  106.                     <li id="zzjs12"><span href="#" onmouseover="show_zzjs_1(12)">三区c</span></li> 
  107.                 </ul> 
  108.                 <div class="wwwzzjsnet"> 
  109.                     <div id="zzjs_net10" class="dise">三区a内容</div> 
  110.                     <div id="zzjs_net11" class="undise">三区b内容</div> 
  111.                     <div id="zzjs_net12" class="undise">三区c内容</div> 
  112.                 </div> 
  113.             </div> 
  114.         </div><!-- end 三区 --> 
  115.     </div> 
  116. </div> 
  117. </body> 
  118. </html> 

 

网上找个功能更强:


 

下载下面附件:





      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/997728,如需转载请自行联系原作者




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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章