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

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

js tab嵌套切换

技术小胖子 2017-11-14 636浏览量

简介：

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

 



    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

  3. <head> 
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
    5. 

  5. <style> 
    6. 

  6. #tab_zzjs_net{ 
    7. 

  7.     width:400px; 
    8. 

  8.     height:auto; 
    9. 

  9.     margin:0 auto; 
    10. 

  10.     position:relative; 
    11. 

  11. } 
    12. 

  12. ul{ 
    13. 

  13.     list-style:none; 
    14. 

  14.     margin-left:20px; 
    15. 

  15. } 
    16. 

  16. li{ 
    17. 

  17.     float:left; 
    18. 

  18.     height:30px; 
    19. 

  19.     background:url(/img/tr2_20110117zzjs_net.jpg); 
    20. 

  20.     margin:0 5px; 
    21. 

  21.     text-align:center; 
    22. 

  22.     line-height:30px; 
    23. 

  23.     color:#293863; 
    24. 

  24.     width:60px;  
    25. 

  25.     position:relative; 
    26. 

  26.     bottom:-3px; 
    27. 

  27. } 
    28. 

  28. .dise{ 
    29. 

  29.     display:block; 
    30. 

  30. } 
    31. 

  31. .undise{ 
    32. 

  32.     display:none; 
    33. 

  33. } 
    34. 

  34. .fff{ 
    35. 

  35.     background:#f99; 
    36. 

  36. } 
    37. 

  37. .wwwzzjsnet{ 
    38. 

  38.     clear:left; 
    39. 

  39.     width:400px; 
    40. 

  40. } 
    41. 

  41. .wwwzzjsnet div{ 
    42. 

  42.     width:400px; 
    43. 

  43.     background-color:#F2F5FA; 
    44. 

  44.     text-align:left; 
    45. 

  45.     line-height:20px; 
    46. 

  46.     height:200px; 
    47. 

  47.     border:1px #CCCDCD solid; 
    48. 

  48. } 
    49. 

  49. #zzjs{ 
    50. 

  50.     position:absolute; 
    51. 

  51.     top:40px; 
    52. 

  52. } 
    53. 

  53. </style> 
    54. 

  54. </head> 
    55. 

  55. <script  language="javascript"> 
    56. 

  56. function g(o){return document.getElementById(o);} 
    57. 

  57. function show_zzjs_net(i){ 
    58. 

  58.     for(j=1;j<=3;j++){ 
    59. 

  59.         g("zzjs_net"+j).className="undise" 
    60. 

  60.         g("zzjs"+j).className="" 
    61. 

  61.     } 
    62. 

  62.     g("zzjs_net"+i).className="dise" 
    63. 

  63.     g("zzjs"+i).className="fff" 
    64. 

  64. } 
    65. 

  65. function show_zzjs_1(i){ 
    66. 

  66.     for(j=4;j<=12;j++){ 
    67. 

  67.         g("zzjs_net"+j).className="undise" 
    68. 

  68.         g("zzjs"+j).className="" 
    69. 

  69.     }  
    70. 

  70.     g("zzjs_net"+i).className="dise" 
    71. 

  71.     g("zzjs"+i).className="fff" 
    72. 

  72. }  
    73. 

  73. </script> 
    74. 

  74. <body> 
    75. 

  75.  
    76. 

  76. <div id="tab_zzjs_net"> 
    77. 

  77.     <ul> 
    78. 

  78.         <li id="zzjs1" class="fff"><span onmouseover="show_zzjs_net(1)">一区</span></li> 
    79. 

  79.         <li id="zzjs2"><span onmouseover="show_zzjs_net(2)">二区</span></li> 
    80. 

  80.         <li id="zzjs3"><span href="#" onmouseover="show_zzjs_net(3)">三区</span></li> 
    81. 

  81.     </ul> 
    82. 

  82.     <div class="wwwzzjsnet"> 
    83. 

  83.         <div id="zzjs_net1" class="dise"> 
    84. 

  84.             <div id="zzjs"> 
    85. 

  85.                 <ul > 
    86. 

  86.                     <li id="zzjs4" class="fff"><span onmouseover="show_zzjs_1(4)">一区a</span></li> 
    87. 

  87.                     <li id="zzjs5"><span onmouseover="show_zzjs_1(5)">一区b</span></li> 
    88. 

  88.                     <li id="zzjs6"><span href="#" onmouseover="show_zzjs_1(6)">一区c</span></li> 
    89. 

  89.                 </ul> 
    90. 

  90.                 <div class="wwwzzjsnet"> 
    91. 

  91.                     <div id="zzjs_net4" class="dise">一区a内容</div> 
    92. 

  92.                     <div id="zzjs_net5" class="undise">一区b内容</div> 
    93. 

  93.                     <div id="zzjs_net6" class="undise">一区c内容</div> 
    94. 

  94.                 </div> 
    95. 

  95.             </div> 
    96. 

  96.         </div><!-- end 一区 --> 
    97. 

  97.         <div id="zzjs_net2" class="undise"> 
    98. 

  98.             <div id="zzjs"> 
    99. 

  99.                 <ul > 
    100. 

  100.                     <li id="zzjs7" class="fff"><span onmouseover="show_zzjs_1(7)">二区a</span></li> 
    101. 

  101.                     <li id="zzjs8"><span onmouseover="show_zzjs_1(8)">二区b</span></li> 
    102. 

  102.                     <li id="zzjs9"><span href="#" onmouseover="show_zzjs_1(9)">二区c</span></li> 
    103. 

  103.                 </ul> 
    104. 

  104.                 <div class="wwwzzjsnet"> 
    105. 

  105.                     <div id="zzjs_net7" class="dise">二区a内容</div> 
    106. 

  106.                     <div id="zzjs_net8" class="undise">二区b内容</div> 
    107. 

  107.                     <div id="zzjs_net9" class="undise">二区c内容</div> 
    108. 

  108.                 </div> 
    109. 

  109.             </div> 
    110. 

  110.         </div><!-- end 二区 --> 
    111. 

  111.         <div id="zzjs_net3" class="undise"> 
    112. 

  112.             <div id="zzjs"> 
    113. 

  113.                 <ul > 
    114. 

  114.                     <li id="zzjs10" class="fff"><span onmouseover="show_zzjs_1(10)">三区a</span></li> 
    115. 

  115.                     <li id="zzjs11"><span onmouseover="show_zzjs_1(11)">三区b</span></li> 
    116. 

  116.                     <li id="zzjs12"><span href="#" onmouseover="show_zzjs_1(12)">三区c</span></li> 
    117. 

  117.                 </ul> 
    118. 

  118.                 <div class="wwwzzjsnet"> 
    119. 

  119.                     <div id="zzjs_net10" class="dise">三区a内容</div> 
    120. 

  120.                     <div id="zzjs_net11" class="undise">三区b内容</div> 
    121. 

  121.                     <div id="zzjs_net12" class="undise">三区c内容</div> 
    122. 

  122.                 </div> 
    123. 

  123.             </div> 
    124. 

  124.         </div><!-- end 三区 --> 
    125. 

  125.     </div> 
    126. 

  126. </div> 
    127. 

  127. </body> 
    128. 

  128. </html> 
    129. 



 


网上找个功能更强：







 


下载下面附件：














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












            
            

                

                    JavaScript
                    Go
                    前端开发
                

            


            

            

                

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

            


            

                分享：
                
                        

                            
                        

                    
                
            


        

        

            
            
        


        

            

        

    

    

    

        

        

            

                
                    
                
                

                    开发与运维
                    

                        

                            
                            使用钉钉扫一扫加入圈子
                        

                    

                

                

                    + 订阅
                

            

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

            

        


        

        

            
            
其他文章


            

                

                    

                        

                        
展开