问个 js隐藏和显示的效果 如何实现了！

Question

我现在用的这个 隐藏和显示是可以实现。但是 是单个层。如果我多个层就不行了。不能一次切换成功因为到时候 数据都要重数据库里读出来。。会出现很多切换 显示 隐藏层!<script type="text/javascript"> 
function chg(id_num){ 
var oa = document.getElementById(id_num); 
var qunbu = document.getElementById("qunbu");
if(oa.style.display == "block"){ 
oa.style.display = "none"; 
}
else{ 
oa.style.display = "block"; }return false;
 
} 
</script><img src="images/in_21.jpg" onclick="return chg('test');" alt="77">
<div id="test">内容</div>上面的代码是 实现但个这样切换。。那我们要多少怎么实现了。   或者控制在 8个如: id="test" id="test1"....这样的最好不要定死。因为要数据库循环！！

Answer 1

估计楼主是要做网页选项卡功能!
如果是的话就给相对应的元素循环绑定事件,然后再对应的控制DIV!

Answer 2

循环的时候计个数呀，输出到test后面，例如for i = 1 to 8
  response.write("<img src=""images/in_21.jpg"" onclick=""return chg('test"&i&"');"" alt=""77""><div id=""test"&i&""">内容</div>")

Answer 3

我知道啊！！循环的时候 加ID   但是我是要他 点击切换那里会出现问题
比如我现在点击  出现test 的内容 然后我在点击图片的图片。出现 test1 的内容他test的内容不会字隐藏啊。如果内容不多。做成死的还可以用。多起来就不行了！

Answer 4

选项卡效果么以前写过一个。
使用方法<div id="sxwTab">
<div>圆角预留</div>
<div>这里可以有很多个选项</div>
<div>圆角预留</div>
</div><div id="sxwContent"><!-- 2个关联的ID 都以sxw开头  后面分别跟 Tab 和Content 注意大小写 -->
<div>这里是内容</div>
<div>这里是内容   请自行设置初始状态dispaly隐藏</div>
</div>js调用
band.sxw=1;//1表示开始显示第1个.   你也可以不设置,  如果设置为2,  那么请手动设置第2个内容为显示, 其他的为隐藏
bandTab("sxw","normal_1 cDGray","active cWhite");////第1个参数为指定的ID, 第2个参数为 显示时的样式, 第3个为不显示的样式.
JS代码
var band={};function bandTab(traitId,showClassName,hiddenClassName){
var tab=document.getElementById(traitId+"Tab");
var content=document.getElementById(traitId+"Content");
var tabTypeOne=new Array();
for(var i=0;i<tab.childNodes.length;i++){
if(tab.childNodes[i].nodeType==1){
tabTypeOne.push(i);
}
}

var conTypeOne=new Array();
for(var i=0;i<content.childNodes.length;i++){
if(content.childNodes[i].nodeType==1){
conTypeOne.push(i);
}
}
for(var i=1;i<tabTypeOne.length-1;i++){


tab.childNodes[tabTypeOne[i]].setAttribute("tag",i);
tab.childNodes[tabTypeOne[i]].onmousemove=function(){
if(band[traitId]==null){
band[traitId]=1;
}
tab.childNodes[tabTypeOne[band[traitId]]].className=hiddenClassName;
this.className=showClassName;

content.childNodes[conTypeOne[band[traitId]-1]].style.display="none";
content.childNodes[conTypeOne[this.getAttribute("tag")-1]].style.display="block";
band[traitId]=this.getAttribute("tag");

};
}


}