Entfernen und Hinzufügen von Klasse mit jQuery mit mehreren Klassen

Question

Im mit Jquery zu entfernen und Klasse hinzufügen, um die aktive Registerkarte in meiner Navigation. Die aktive Klasse wird jedoch nicht entfernt, nachdem auf eine neue Registerkarte geklickt wurde. Bitte beachten Sie für weitere Informationen. Ich weiß nicht, warum die Klasse nicht entfernt wird, wenn auf einen neuen Tab geklickt wird oder der Benutzer zu einem neuen Bereich scrollt.

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>"; 

     } 
    }); 
}); 

/* Farbe aktiver Reiter */

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

Ihr letzter Javascript-Block ist der relevante. Sie müssen alle Klassen von alle der Elemente löschen, bevor Sie die aktive Klasse auf die angeklickte anwenden. Sie müssen das tun, egal auf welches geklickt wurde. Diese Lösung sollte für Sie arbeiten:

$('#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'); 
});