切换Div Javascript [英] Toggle Div Javascript

问题描述

我的网页上有一些div，当点击链接时，他们需要切换（显示/隐藏）

I have some divs on my page that when a link is clicked they need to toggle (show/hide)

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？ Cany任何人看到哪里错了？
感谢

my problem is that no matter what link i click it only toggles the first div? Cany anybody see where im going wrong? Thanks

推荐答案

您的第一个问题是尝试编写非平凡的crossbrowser JavaScript。如果您使用类似 jQuery 的方法，这将非常简单，非常。

Your first issue is trying to write non-trivial crossbrowser JavaScript. This would be much, much simpler if you used something like jQuery.

也就是说，你的问题是你的 onClick 处理程序都指向同一个 id 。

That said, your issue is that your onClick handlers are all pointing to the same id.

onclick="showhide('div1');"

将这些更改为相关的div id，您应该就可以了。

Change these to the relevant div id's and you should be fine.

如果你使用像jQuery这样的函数，这个函数将是不相关的，你可以做一些像：

If you used something like jQuery, this function would be irrelevant though and you could just do something like:

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

这篇关于切换Div Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！