使用 jQuery 事件显示和隐藏

Question

有几个高级 jQuery 插件可以通过相应的 id 或类过滤

。这确实是基于一个简单的 jQuery 想法，但我不知道如何实现它。考虑一个用于显示/隐藏内容的菜单

<ul id="filters" class="menu" indicator="filter">
 <li><a href="#filter" indicator="*" class="selected">All</a></li>
 <li><a href="#filter" indicator=".first">First</a></li>
 <li><a href="#filter" indicator=".third">Third</a></li>
</ul>

，我们想要控制内容的显示：

<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>

执行此操作的最简单的 jQuery Javascript 代码是什么？

默认情况下，所有

都会显示，当我们从菜单中单击

（例如FIRST）时，jQuery将过滤< ;div> 仅显示该类为“第一个”的

。

Answer 1

不要使用属性“indicator”，因为它不存在。使用如下所示的类元素。也不需要 A 元件。

<ul id="filters" class="menu">
 <li class="selected all">All</li>
 <li class="first">First</li>
 <li class="third">Third</li>
</ul>

然后你的脚本

// hide all divs 
$('div.box').css('display','hidden');

// add click handler on control list
$('ul#filters li').click(function() {

   var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item != 'selected') {
           $('div.'+item).css('display','block');
        }
    });

});

Answer 2

$(function(){
  $('#filters li a').live('click', function(){
    $('.box').hide();

    indirector = $(this).attr('indicator');

    indirector = indirector.substring(1);

    if(indirector == '')
      $('.box').show();   
    else
      $('div.' + indirector).show();

  });
});

参考

Answer 3

使用 class 属性而不是 indicator 并尝试以下操作：

$('#filters li').click(function(){
    $('div.' + $(this).attr('class')).show();
});

要使其正常工作，您必须将 all 类分配给您的第一个 LI，如下所示以及您所有的 DIV。希望这有帮助！

Answer 4

试试这个代码，

$('#filters li').click(function(){
    $("div.box").hide();
    $('div.box' + $(this).children('a').attr('indicator')).show();
});