jquery-isotope - Add class to current Isotope filter

Question

I'm using the following jQuery to filter Isotope items:

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

       }
      });

Which corresponds with this 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>

I'd like for the current filter link to have a class of "current" when in view. Any ideas on how to do this?

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,

       }
      });
});