jQuery显示和隐藏具有所选类的多个div [英] jQuery Show and Hide multiple divs with a selected class

问题描述

我需要能够显示和隐藏基于href类是选择的div。我有一些代码如下：

I need to be able to show and hide divs based on which href class is 'selected' I have some code below:

http://jsfiddle.net/XwN2L/722/

我需要移除所有

因此，基本上当href具有所选择的类时，显示href的两个链接，然后当用户点击另一个href时，它隐藏了以前的链接，并显示了与所选类别的新链接

So basically when a href has the class of selected the two links for the href are shown, then when a user clicks on another href, it hides the previous links and shows the new links with the class 'selected'

当他们点击链接时，选定的类会更改，按钮隐藏和显示？

When they click on the link the selected class changes and the buttons hide and show accordingly?

几乎只有最后一点需要帮助。

Nearly there just need help on the last bits.

<div class="buttons">
 <a id="showall">All</a>
 <a class="showSingle" target="1">Div 1</a>
 <a class="showSingle selected" 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">
 <a href="#" class="button3">1a</a>
 <a href="#" class="button3">1b</a>
</div>

<div id="div2" class="targetDiv">
 <a href="#" class="button3">2a</a>
 <a href="#" class="button3">2b</a>
</div>

<div id="div3" class="targetDiv">
  <a href="#" class="button3">3a</a>
  <a href="#" class="button3">3b</a>
</div>

<div id="div4" class="targetDiv">popup COMPLETE</div>

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

干杯

推荐答案

您可以使用 data - * 属性：

<div class="buttons">
  <a  id="showall" data-target="all" >All</a>
  <a  class="showSingle" data-target="1">Div 1</a>
  <a  class="showSingle selected" data-target="2">Div 2</a>
  <a  class="showSingle" data-target="3">Div 3</a>
  <a  class="showSingle" data-target="4">Div 4</a>
</div>

var $target = $('.targetDiv'); // caching object for better performance

$('.buttons a').click(function(e) {
    e.preventDefault();
    $(this).addClass('selected').siblings().removeClass('selected');
    var target = $(this).data('target');
    if (target === 'all') {
        $target.show();
    } else {
        $target.hide().filter('#div' + target).show();
    }
});

http://jsfiddle.net/fKHsB/

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