刪除並添加類與多個類使用jQuery

Question

即時通訊使用Jquery刪除並添加類到我的導航上的活動選項卡。但是，在單擊新選項卡後，活動類不會被刪除。請參閱要點更多。我不知道爲什麼當一個新的標籤被點擊或者用戶滾動到一個新的部分時，這個班級不會被刪除。

https://gist.github.com/flyspaceage/5720a4aa75815c20d6d703607f9d27c0

.active-break { 
 
    background-color: #6390C6 !important; 
 
} 
 

 
.active-why { 
 
    background-color: #6E8F82 !important; 
 
} 
 

 
.active-test { 
 
    background-color: #E77C22 !important; 
 
} 
 

 
.active-deep { 
 
    background-color: #466EA5 !important; 
 
}

<ul class="pagination"> 
 
    <!-- <li> 
 
\t  \t \t \t <a class="nav" href="#intro" class="nav-intro"> 
 
\t  \t \t \t \t Top 
 
\t  \t \t \t </a> 
 
\t  \t \t </li> --> 
 
    <li> 
 
    <a id="one" class="nav nav-break" href="#breaking-away">Breaking Away</a> 
 
    </li> 
 
    <li> 
 
    <a id="two" class="nav nav-why" href="#why-right-now">Why Right OnCourse</a> 
 
    </li> 
 
    <li> 
 
    <a id="three" class="nav nav-test" href="#testimonials">Testimonials</a> 
 
    </li> 
 
    <li> 
 
    <a id="four" class="nav nav-deep" href="#deep-dive">Deep Dive</a> 
 
    </li> 
 
    <li> 
 
    <a id="five" class="nav nav-resources" href="#resources">Resources</a> 
 
    </li> 
 
</ul>

/* 
* Scrollify 
**/ 
$(function(){ 
    $.scrollify({ 
     section: ".scrollify-section", 
     interstitialSection : ".leaf .contact .footer", 
     setHeights: false, 
     touchScroll: false, 

     before:function(i,panels) { 
      var ref = panels[i].attr("data-section-name"); 

      $(".pagination .active").removeClass("active"); 

      $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active"); 

      var ref = panels[i].attr("data-section-name"); 

      if(ref==="breaking-away") { 
      $(".breaking-away .carousel-box-shadow").addClass("animate"); 
      } 
      if(ref==="intro") { 
      $(".breaking-away .carousel-box-shadow").removeClass("animate"); 
      } 
      if(ref==="testimonials") { 
      $(".breaking-away .carousel-box-shadow").removeClass("animate"); 
      } 
     }, 

     afterRender:function() { 
      var pagination = "<ul class=\"pagination\">"; 
      var activeClass = ""; 
      $(".panel").each(function(i) { 
      activeClass = ""; 
      if(i===0) { 
       activeClass = "active"; 
      } 
      pagination += "<li><a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "</span></a></li>"; 
      }); 

      pagination += "</ul>"; 

     } 
    }); 
}); 

/*彩色有源標籤*/

var selectorOne = '#one'; 

$(selectorOne).on('click', function(){ 
    $(selectorOne).removeClass('active-break'); 
    $(this).addClass('active-break'); 
}); 

var selectorTwo = '#two'; 

$(selectorTwo).on('click', function(){ 
    $(selectorTwo).removeClass('active-why'); 
    $(this).addClass('active-why'); 
}); 

var selectorThree = '#three'; 

$(selectorThree).on('click', function(){ 
    $(selectorThree).removeClass('active-test'); 
    $(this).addClass('active-test'); 
}); 

var selectorFour = '#four'; 

$(selectorFour).on('click', function(){ 
    $(selectorFour).removeClass('active-deep'); 
    $(this).addClass('active-deep'); 
}); 

Answer 1

你最後一塊的Javascript是相關的。在將活動類應用到被點擊的類之前，您需要清除所有中的所有類。無論點擊哪一個，您都需要這樣做。這個解決方案應該爲你工作：

$('#one').on('click', function(){ 
    $('.pagination a').removeClass(); 
    $(this).addClass('active-break'); 
}); 

$('#two').on('click', function(){ 
    $('.pagination a').removeClass(); 
    $(this).addClass('active-why'); 
}); 

$('#three').on('click', function(){ 
    $('.pagination a').removeClass(); 
    $(this).addClass('active-test'); 
}); 

$('#four').on('click', function(){ 
    $('.pagination a').removeClass(); 
    $(this).addClass('active-deep'); 
});