javascript - 切换 Div Javascript

Question

我的页面上有一些 div，单击链接时它们需要切换(显示/隐藏)

JS

var state = 'none';

function showhide(layer_ref) {
//alert(eval( "document.all." + layer_ref + ".style.display") == "none")

if (document.all) { //IS IE 4 or 5 (or 6 beta)
if(eval( "document.all." + layer_ref + ".style.display") == "none"){
eval( "document.all." + layer_ref + ".style.display = 'block'");
}else{
eval( "document.all." + layer_ref + ".style.display = 'none'");
}

}
if (document.layers) { //IS NETSCAPE 4 or below
if(document.layers[layer_ref].display == none){
document.layers[layer_ref].display = "block";
}else{
document.layers[layer_ref].display = "none";
}
}
if (document.getElementById &&!document.all) {
if(document.getElementById(layer_ref).style.display == "none"){
document.getElementById(layer_ref).style.display = "block";
}else{
document.getElementById(layer_ref).style.display = "none";
}
}
}

HTML

     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div1" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div2" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div3" style="display: none;">divcont</div>
     </div>

我的问题是，无论我点击哪个链接，它只会切换第一个 div？谁能看到我哪里出错了？ 谢谢

Answer 1

您的第一个问题是尝试编写重要的跨浏览器 JavaScript。如果您使用类似 jQuery 的东西，这将非常、非常简单.

也就是说，您的问题是您的 onClick 处理程序都指向相同的 id。

onclick="showhide('div1');"

将这些更改为相关的 div id，您应该没问题。

如果你使用像 jQuery 这样的东西，这个函数将是无关紧要的，你可以做这样的事情:

onclick="$('#div1').toggle()"