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

使用带有多个类的jQuery删除和添加类

1 个答案: