使用 Jquery 显示/隐藏多个 div答案

【问题标题】：Show/Hide Multiple Divs with Jquery使用 Jquery 显示/隐藏多个 div
【发布时间】：2011-08-06 13:24:05
【问题描述】：

我想使用一些按钮来使用 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>

【问题讨论】：

见：Example

标签： jquery

【解决方案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/

【讨论】：

谢谢普拉文。完美运行。
完美答案:)

【解决方案2】：

如果它们属于逻辑组，我可能会选择class approach already listed here。

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

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

其中 'div1'、'div2' 和 'div3' 都是您要同时显示的各种 div 的 id 属性。

【讨论】：

【解决方案3】：

为每个 div 分配一个class。然后您可以对所有这些执行操作：

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

所以每个按钮都可以做：

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

你可以让它更通用，并使用明显的约定——按钮和 id 中具有相同数字的 div 是相关的。所以：

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

【讨论】：

【解决方案4】：

只是一个小注解...如果您将它与其他脚本一起使用，最后一行的 $ 将导致冲突。只需将其替换为 jQuery 即可。

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

http://jsfiddle.net/XwN2L/4764/

【讨论】：

【解决方案5】：

简单但愚蠢的方法：

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

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

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

【讨论】：

【解决方案6】：

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

例子：

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

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

然后你只需要使用一个标识符将动作链接到他的目标，并且使用 5,6 行 jquery 代码你就拥有了你需要的一切。

【讨论】：

【解决方案7】：

检查这个Example

HTML：

<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">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript：

$('#showall').click(function(){
    $('div').show();
});

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

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

$('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();

});

【讨论】：

【解决方案8】：

我遇到了同样的问题，阅读了这篇文章，但最终构建了这个解决方案，该解决方案通过使用 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>

【讨论】：