Question

JS控制DIV隐藏显示。

现在有3个DIV块，3个超链接，需要点击一个链接，显示相应的块，并隐藏其余2个...怎么做...做了很多种方法，都失败了。

<a href="javascript:changeBody(1)">模块A</a>
<a href="javascript:changeBody(2)">模块B</a>
<a href="javascript:changeBody(3)">模块C</a>
</div>

<div style="display: none" id="iDBody1"></div>
<div style="display: none" id="iDBody2"></div>
<div style="display: none" id="iDBody3"></div>
请大家先行试验...有些我自己也这么写过，但是不行。

Answer 1

function changeBody(index){
switch(index){
case 1:{
document.getElementById('iDBody1').style.display = "";
document.getElementById('iDBody2').style.display = "none";
document.getElementById('iDBody3').style.display = "none";
}
case 2:{
document.getElementById('iDBody1').style.display = "none";
document.getElementById('iDBody2').style.display = "";
document.getElementById('iDBody3').style.display = "none";
}
case 3:{
document.getElementById('iDBody1').style.display = "none";
document.getElementById('iDBody2').style.display = "none";
document.getElementById('iDBody3').style.display = "";
}
}
}

Answer 2

你下面的div的display不要设在这里
你可以给每个div加上一个class比如
dis
，在CSS中把这个全部div的display设为none
，新建一个css的class样式show，样式中就是写display:block
!important;注意这里的！important非常重要，一定要写上，然后你再在进入页面默认显示的div加上这个show类，也就是说默认的那个有两个class名
一个dis
一个show
然后写js代码，也就是添加跟移除css了！我想睡觉，不想写，所以哥们你先看下，自己写出来印象更深刻，还搞不定的话我再来帮你写！！

Answer 3

引用bangbong的回答：
function changeBody(index){
switch(index){
case 1:{
document.getElementById('iDBody1').style.display = "";
document.getElementById('iDBody2').style.display = "none";
document.getElementById('iDBody3').style.display = "none";
}
case 2:{
document.getElementById('iDBody1').style.display = "none";
document.getElementById('iDBody2').style.display = "";
document.getElementById('iDBody3').style.display = "none";
}
case 3:{
document.getElementById('iDBody1').style.display = "none";
document.getElementById('iDBody2').style.display = "none";
document.getElementById('iDBody3').style.display = "";
}
}
}

这个才是正确的
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;
}
}