使用Jquery显示/隐藏多个div

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

该页面最初将显示所有div。这样的想法是，将有一个按钮来重置ShowAll，然后有单独的按钮来显示特定的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>

给每个div分配一个类。然后，您可以对所有对象执行操作：

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

因此，每个按钮都可以：

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

您可以使其更通用，并使用明显的约定-按钮和id中具有相同编号的div是相关的。因此：

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

---

简单但愚蠢的方法：

$('#showall').click(function(){
    $('div[id^=div]').show();
});

$('#showdiv1').click(function(){
    $('#div1').show();
    $('div[id^=div]').not('#div1').show();
});

---

至于更好的一种方法-将公共类添加到所有div中，并在id为目标div的按钮中使用一些属性

如果您希望能够用更少的代码显示/隐藏单个div和/或div组，只需对它们应用几个类，在需要时将它们插入到组中即可

例如：

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

然后，您只需要使用一个标识符将操作链接到目标，使用5,6行jquery代码，您就拥有了所需的一切

Html:

---

若他们属于逻辑组，我可能会同意

许多人似乎忘记了，您实际上也可以在同一个jQuery选择器中按id选择多个项目：

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

其中，“div1”、“div2”和“div3”都是要同时显示的各个div上的id属性。

jQueryfunction{ jQuery'showall'。单击函数{ jQuery'.targetDiv'.show； }; jQuery'.showSingle'.clickfunction{ jQuery'.targetDiv'.hide； jQuery'div'+$this.attr'target.show； }; }; 全部的 第一组 第2组 第3组 第4组 益母草 益母草 益母草

---

Lorum Ipsum4我也遇到了同样的问题，读了这篇文章，但最终构建了这个解决方案，通过使用JQuery的attr函数从href上的自定义类获取ID来动态选择div

以下是JQuery：

$('a.custom_class').click(function(e) {
  var div = $(this).attr('href');
  $(div).toggle('fast');
  e.preventDefault();
}

您只需在HTML中创建如下链接：

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>

---

只是一个小小的旁注。。。如果将此脚本与其他脚本一起使用，最后一行的$将导致冲突。只要用jQuery替换它，就可以了

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

---

谢谢你，普拉文。非常有效。完美答案：请参阅：

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>

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