过滤内容(jQuery)

时间:2010-04-24 09:38:31

标签: javascript jquery filter categories

HTML:

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-2">item 3</li>
    <li class="category-2">item 4</li>
</ul>

我想要的是例如点击“类别1”链接应该隐藏列表中的所有其他类别项目。

我理解jQuery的.filter()选择器可以使用,但我不知道如何在我这里实现它。

感谢您的帮助!

2 个答案:

答案 0 :(得分:3)

$('div.filter').delegate('a', 'click', function (event) {
  $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();

  event.preventDefault();
});

答案 1 :(得分:0)

基本上你会做这样的事情:$('.items li').hide(); $('.category-1').show();

第一个隐藏所有其他菜单项,后者显示所选菜单项:) 您只需将其放在onclick标记的<a>中即可。