Question

这不起作用，hello2和hello3不会显示。它与'#id只能使用一次'有关？将它更改为类不起作用，如何解决这个问题？

HTML

<a href="javascript:unhide('menu');">Toggle</a>

<div id="menu" class="hidden">hello</div>
<div id="menu" class="hidden">hello2</div>
<div id="menu" class="hidden">hello3</div>

CSS

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

JS

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
}

Answer 1

ID必须是唯一的。

试试这个：

HTML：

<div class="hidden">hello</div>
<div class="hidden">hello2</div>
<div class="hidden">hello3</div>

JS：

$(document).ready(function(){
    $("a").click(function(){    
        $("div").toggleClass("hidden unhidden");
    });
});

Fiddle here.

Answer 2

一个Jquery解决方案，我刚刚用另一个独特的类替换了你的id。只需参考下面的代码即可掌握它。

HTML

<a href="#">Toggle</a>

<div  class="xTest hidden">hello</div>
<div  class="xTest hidden">hello2</div>
<div  class="xTest hidden">hello3</div>

JQUERY

$("a").click(function(){

    var xObj = $(".xTest");

    if(xObj.hasClass("hidden"))
    {
        xObj.removeClass("hidden").addClass("unhidden");
    }
    else
    {
        xObj.removeClass("unhidden").addClass("hidden");
    }

});

DEMONSTRATION

Answer 3

为什么不将所有div包装在另一个div中？

http://jsfiddle.net/bDQt7/7/

在其中有菜单和项目更有意义（我猜你需要锚点而不是菜单div中的div）

如果你还不知道它是什么，你就不需要jquery。

<div id='menu' class='hidden'>
  <a href='#'>menu</a>
  <a href='#'>menu2</a>
  <a href='#'>menu3</a>
</div>

我无法让所有的div显示出相同的#id

3 个答案:

HTML

JQUERY

DEMONSTRATION