转载自：http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html
JS控制DIV隐藏显示
一，需求描述：
现在有3个DIV块，3个超链接，需要点击一个链接，显示相应的模块，并隐藏其余2个模块
二，代码如下
示例一
Html代码
- <html>
- <head>
- <script type="text/javascript">
- function changeBody(index){
- switch(index){
- case 1:{
- document.getElementById('iDBody1').style.display = "";
- document.getElementById('iDBody2').style.display = "none";
- document.getElementById('iDBody3').style.display = "none";
- break;
- }
- case 2:{
- document.getElementById('iDBody1').style.display = "none";
- document.getElementById('iDBody2').style.display = "";
- document.getElementById('iDBody3').style.display = "none";
- break;
- }
- case 3:{
- document.getElementById('iDBody1').style.display = "none";
- document.getElementById('iDBody2').style.display = "none";
- document.getElementById('iDBody3').style.display = "";
- break;
- }
- }
- }
- </script>
- </head>
- <body>
- <a href="javascript:changeBody(1)">模块A</a>
- <a href="javascript:changeBody(2)">模块B</a>
- <a href="javascript:changeBody(3)">模块C</a>
- <div style="display: none" id="iDBody1">
- 模块(一)的相关内容
- </div>
- <div style="display: none" id="iDBody2">
- 模块(二)的相关内容
- </div>
- <div style="display: none" id="iDBody3">
- 模块(三)的相关内容
- </div>
- </body>
- </html>
示例二
Html代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>DIV-3</title>
- <style type="text/css">
- .hiddiv {display:none}
- </style>
- <SCRIPT language=JavaScript>
- <!--
- function a(x){
- for( ; i<divLen; i++ ){
- if(allDiv[i].className=="hiddiv")
- allDiv[i].style.display = "none"
- if(allDiv[i].id=="div"+x)
- allDiv[i].style.display = "block"
- }
- }
- window.onload = function(){
- allDiv = document.getElementsByTagName("div");
- divLen = allDiv.length
- }
- -->
- </SCRIPT>
- </head>
- <body>
- <div id="div1" class="hiddiv" style="display:block">此处显示 id "div1" 的内容</div><br>
- <div id="div2" class="hiddiv">此处显示 id "div2" 的内容</div><br>
- <div id="div3" class="hiddiv">此处显示 id "div3" 的内容</div><br>
- <div id="div4" class="hiddiv">此处显示 id "div4" 的内容</div><br>
- <select onChange="a(value)">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- </select>
- </body>
- </html>