1

次の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>

ビューに表示されているときに、現在のフィルター リンクが「現在」のクラスを持つようにしたいと思います。これを行う方法についてのアイデアはありますか？

4

1 に答える 1

2

関数に 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,

       }
      });
});
于 2013-02-04T13:36:15.693 に答える