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> 
posted @ 2015-08-13 14:48  花语苑  阅读(2718)  评论(0)  编辑  收藏  举报