添加類當前同位素過濾

Question

我使用jQuery的以下過濾同位素項目：

$('#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, 

     } 
     }); 
});