使用Jquery显示/隐藏多个Div

Question

我想使用一些按钮来显示/隐藏使用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>

Answer 1

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/

Answer 2

如果它们属于逻辑组,我可能会选择此处列出的类方法.

许多人似乎忘记了你可以在同一个jQuery选择器中实际选择id的几个项目:

$("#div1, #div2, #div3").show();

其中'div1','div2'和'div3'都是您想要一次显示的各种div的id属性.

Answer 3

分配每个div a class.然后,您可以对所有这些操作执行操作:

$(".divClass").hide();

所以每个按钮都可以:

$(".divClass").hide()
$("#specificDiv").show();

你可以使它更通用,并使用明显的约定 - 按钮和id中相同数字的div是相关的.所以:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}