zoukankan      html  css  js  c++  java

  • JS控制DIV隐藏显示

    转载自：http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html

    JS控制DIV隐藏显示

    一，需求描述：

    现在有3个DIV块，3个超链接，需要点击一个链接，显示相应的模块，并隐藏其余2个模块

    二，代码如下

    示例一

    Html代码
    1. <html>  
    2. <head>  
    3. <script type="text/javascript">  
    4. function changeBody(index){   
    5. switch(index){   
    6. case 1:{   
    7. document.getElementById('iDBody1').style.display = "";   
    8. document.getElementById('iDBody2').style.display = "none";   
    9. document.getElementById('iDBody3').style.display = "none";   
    10. break;   
    11.     }   
    12. case 2:{   
    13. document.getElementById('iDBody1').style.display = "none";   
    14. document.getElementById('iDBody2').style.display = "";   
    15. document.getElementById('iDBody3').style.display = "none";   
    16. break;   
    17.     }   
    18. case 3:{   
    19. document.getElementById('iDBody1').style.display = "none";   
    20. document.getElementById('iDBody2').style.display = "none";   
    21. document.getElementById('iDBody3').style.display = "";   
    22. break;   
    23.       }   
    24.    }   
    25. }   
    26. </script>  
    27. </head>  
    28. <body>  
    29.   
    30. <a href="javascript:changeBody(1)">模块A</a>  
    31. <a href="javascript:changeBody(2)">模块B</a>  
    32. <a href="javascript:changeBody(3)">模块C</a>  
    33.   
    34. <div style="display: none" id="iDBody1">  
    35.    模块(一)的相关内容   
    36. </div>  
    37. <div style="display: none" id="iDBody2">  
    38.    模块(二)的相关内容   
    39. </div>  
    40. <div style="display: none" id="iDBody3">  
    41.    模块(三)的相关内容   
    42. </div>  
    43. </body>  
    44. </html>  

     示例二

    Html代码
    1. <html>  
    2. <head>  
    3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    4. <title>DIV-3</title>  
    5. <style type="text/css">  
    6. .hiddiv {display:none}   
    7. </style>  
    8. <SCRIPT language=JavaScript>  
    9. <!--   
    10. function a(x){   
    11. for( i=0; i<divLen; i++ ){   
    12.     if(allDiv[i].className=="hiddiv")   
    13.         allDiv[i].style.display = "none"  
    14.     if(allDiv[i].id=="div"+x)   
    15.         allDiv[i].style.display = "block"  
    16. }   
    17. }   
    18. window.onload = function(){   
    19.   allDiv = document.getElementsByTagName("div");   
    20.   divLen = allDiv.length   
    21. }   
    22. -->  
    23. </SCRIPT>  
    24. </head>  
    25. <body>  
    26. <div id="div1" class="hiddiv" style="display:block">此处显示 id "div1" 的内容</div><br>  
    27. <div id="div2" class="hiddiv">此处显示 id "div2" 的内容</div><br>  
    28. <div id="div3" class="hiddiv">此处显示 id "div3" 的内容</div><br>  
    29. <div id="div4" class="hiddiv">此处显示 id "div4" 的内容</div><br>  
    30. <select onChange="a(value)">  
    31. <option value="1">1</option>  
    32. <option value="2">2</option>  
    33. <option value="3">3</option>  
    34. <option value="4">4</option>  
    35. </select>  
    36. </body>  
    37. </html> 
  • 相关阅读:
    类图class的依赖关系
    ASP.NET MVC 5
    单例模式
    facebook .net sdk 应用
    跟我一起云计算（1）——storm
    C# 求精简用一行代码完成的多项判断 重复赋值
    语音播报实时天气
    滚动监听
    10277
    第十届蓝桥杯JavaB组省赛真题
  • 原文地址：https://www.cnblogs.com/zrui-xyu/p/4727289.html
Copyright © 2011-2022 走看看