使用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>

- Paul

---

请参见：示例。 - jschorr

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/

- Praveen Prasad

---

完美的答案 :) - acmsohail

Answer 2

如果它们可以分成逻辑组，我可能会选择已经列在这里的类别方法。

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

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

其中'div1'、'div2'和'div3'都是各种要同时显示的

元素上的id属性。

- Dan Esparza

Answer 3

给每个

分配一个。然后你就可以对它们执行操作了：

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

因此，每个按钮都可以执行以下操作：

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

您可以将此更通用化，并使用明显的约定 - 具有相同数字ID的按钮和div相关联。因此：

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

- Bozho

---

如果您获取元素并将其保存在变量中，然后想要隐藏它们，则不起作用。let elements = $(".divClass"); elements.hide(); - sadalsuud

Answer 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/

- DN1CE

Answer 5

简单但愚蠢的方法：

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

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

关于更好的方法 - 将通用类添加到所有div中，并在按钮中使用某些属性与目标div的id

- Jacek Kaniuk

Answer 6

如果您想要以更少的代码显示/隐藏单个div和/或div组，只需为它们应用多个类，并在需要时将它们插入到组中即可。

例如：

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

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

然后，您只需要使用标识符将操作链接到目标，并使用5、6行jQuery代码即可获得所需的一切。

- yoda

Answer 7

检查这个示例

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();

});

- Amir Ismail

Answer 8

链接上的target属性会在新窗口中打开，因此我将接受的答案修改为以下内容：

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

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

<div id="div-showdiv1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div-showdiv2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div-showdiv3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div-showdiv4" class="targetDiv">Lorum Ipsum 4</div>

- iorgv

Answer 9

我也曾遇到这个问题，阅读了这篇文章，但最终建立了一个解决方案，通过使用JQuery的attr()函数从的自定义类中提取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>

- Justin