相关疑难解决方法(0)

我想使用一些按钮来显示/隐藏使用jquery的多个div.

该页面最初将显示所有div.接下来的想法是,将有一个按钮重置(显示全部),然后单独按钮显示特定的div,同时隐藏其余部分.

任何帮助将非常感激.

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>

HTML:

<div id="bottomContent" class="bottom_content" > <p>First Content</p> </div>

<div id="bottomContent2" class="bottom_content" > <p>second Content</p> </div>

<div id="bottomContent3" class="bottom_content" > <p>Third Content</p> </div>

JS:

   $("div.one").click (function(){
      $("#bottomContent2").hide();
      $("#bottomContent3").hide();
      $("#bottomContent").animate({width: "toggle"}, 1000);
    });

    $("div.two").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent1").hide();
       $("#bottomContent2").animate({width: "toggle"}, 1000);
    });

    $("div.three").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent2").hide();
       $("#bottomContent3").animate({width: "toggle"}, 1000);
    });

我有以下jQuery代码,当单击每个div时,它将为其自己的相应div项设置动画并关闭可能已经打开的任何其他div但我相信有更好的方法来编码它并使其比我已经做好了.任何帮助将不胜感激.