jquery - 使用具有多个类的 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>
	    			<a class="nav" href="#intro" class="nav-intro">
	    				Top
	    			</a>
	    		</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');
});