Question

我正在使用以下jQuery来过滤Isotope项目：

    $('#nav a').click(function(){
      var selector = $(this).attr('data-filter');
        $container.isotope({ 
        filter: selector,
        animationOptions: {
         duration: 1200,
         easing: 'linear',
         queue: false,

       }
      });

与此HTML对应：

<nav id="nav">
        <ul>
            <li><a href="" data-filter="*">All</a></li>
            <li><a href="" data-filter=".cat1">Category 1</a></li>
            <li><a href="" data-filter=".cat2">Category 2</a></li>
            <li><a href="" data-filter=".cat3">Category 3</a></li>
            <li><a href="" data-filter=".cat4">Category 4</a></li>
            <li><a href="" data-filter=".cat5">Category 5</a></li>
        </ul>
    </nav>

我希望当前的过滤器链接在视图中有一个“当前”类。关于如何做到这一点的任何想法？

Answer 1

您可以将addClass和removeClass用于您的函数。在添加类之前，您需要从所有项目中删除该类，以便从之前选择的任何项目中清除它。

    $('#nav a').click(function(){
      //removes class from all items to "clear" the class from your menu
      $('#nav a').removeClass("current");

      //adds the class to whichever item you clicked
      $(this).addClass("current");

      var selector = $(this).attr('data-filter');
        $container.isotope({ 
        filter: selector,
        animationOptions: {
         duration: 1200,
         easing: 'linear',
         queue: false,

       }
      });
});

将类添加到当前Isotope过滤器

1 个答案: