JS控制DIV隐藏显示.doc

JS控制DIV隐藏显示 JavaScriptCSSHTML 一，需求描述： 现在有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 titleDIV-3/title style type=text/css .hiddiv {display:none} /style SCRIPT language=JavaScript !-- function a(x){ for( i=0; idivLen; 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 的内容/divbr div id=div2 class=hiddiv此处显示 id div2 的内容/divbr div id=div3 class=hiddiv此处显示 id div3 的内容/divbr div id=div4 class=hiddiv此处显示 id div4 的内容/divbr select onChange=a(value) option value=11/option option value=22/option option value=33/option option value=44/option /select /body /html