使用jQuery显示/隐藏多个div [英] Show/Hide Multiple Divs with Jquery

问题描述

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

I want to use some buttons to show/hide multiple divs using jquery.

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

The page will initially show all divs. The idea then is that there will be a button to reset (show all) and then separate buttons to show a particular div while hiding the rest.

任何帮助将不胜感激.

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

推荐答案

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/

这篇关于使用jQuery显示/隐藏多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！