首页 文章

jQuery使用选定的类显示和隐藏多个div

提问于
浏览
7

我需要能够显示和隐藏基于哪个href类被“选中”的div我在下面有一些代码:

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

我需要删除上面小提琴中的'all'选项 .

所以基本上当一个href具有所选择的类时,显示了href的两个链接,然后当用户点击另一个href时,它隐藏了之前的链接并显示了具有“selected”类的新链接

当他们点击链接时,所选的类会发生变化,按钮会隐藏并相应显示?

几乎只需要最后一点的帮助 .

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

干杯

1 回答

  • 4

    您可以使用 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/

相关问题