javascript - 使用 jQuery 事件显示和隐藏 <div>

Question

有几个高级 jQuery 插件可以过滤 <div> s 通过相应的 id 或 class。这确实是基于一个简单的 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 代码是什么？

默认情况下，所有 <div>当我们点击 <li> 时，会显示从菜单(例如 FIRST)中，jQuery 将过滤 <div>只显示<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');
        }
    });

});