Remove and Add class using jQuery with multiple classes

Question

Im using Jquery to remove and add class to the active tab on my navigation. However the active class will not remove after a new tab is clicked. Please see gist for more. I do not know why the class will not remove when a new tab is clicked or the user scrolls to a new section.

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

        }
    });
});

/* Color active tab */

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

Please include in your question the logic that you are using to move the class around. — Taplar
– Taplar, Commented Jul 21, 2017 at 17:13

mrfolkblues · Accepted Answer · 2017-07-21 19:05:52Z

1

Your last block of Javascript is the relevant one. You need to clear all the classes from all of the items before applying the active class to the one that was clicked. You will need to do that no matter which one was clicked. This solution should work for you:

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

answered Jul 21, 2017 at 19:05

mrfolkblues

785 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FlySpaceAge Over a year ago

thanks, I was trying to add all of the classes within the removeClass method, but I see i need to put it before and actually use the parent not the class.

Collectives™ on Stack Overflow

Remove and Add class using jQuery with multiple classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related