I'm trying to make a navigation bar where the current tab you're visiting has a different background color, by adding a CSS class (the "clickedNav" class). I have a loop to iterate through and remove the color (so only the current tab is highlighted), and then I add the color to the clicked link. Right now, it's adding the class (clickedNav) successfully, but my loop to remove them beforehand isn't removing them (I'm seeing lots of "HEYS", but no "yup"s). Here's the relevant code:

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($('.navlink').hasClass('.clickedNav')){
            console.log("yup");
            $('.navlink').removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    event.stopPropagation();
});

What am I doing wrong?

EDIT: Thanks for the help folks. See scrblndr3's response for the fix to my code as posted, and Pinpickle's response for a more efficient resolution.

I'm trying to make a navigation bar where the current tab you're visiting has a different background color, by adding a CSS class (the "clickedNav" class). I have a loop to iterate through and remove the color (so only the current tab is highlighted), and then I add the color to the clicked link. Right now, it's adding the class (clickedNav) successfully, but my loop to remove them beforehand isn't removing them (I'm seeing lots of "HEYS", but no "yup"s). Here's the relevant code:

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($('.navlink').hasClass('.clickedNav')){
            console.log("yup");
            $('.navlink').removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    event.stopPropagation();
});

What am I doing wrong?

EDIT: Thanks for the help folks. See scrblndr3's response for the fix to my code as posted, and Pinpickle's response for a more efficient resolution.

• javascript
• jquery
• css

2 Answers 2

No need for the .each function, just use the selector to your advantage (and take the "." out of the removeClass as scrblnrd3 said)

$('.navlink.clickedNav').removeClass('clickedNav');

This way, the function would only be performed on those elements that have the class (though you could just use '.navlink' as the selector and it will do the exact same thing)

You have a couple of problems. Firstly, in your hasClass, you are putting your classes with a dot in front of them. That's unnecessary. Secondly, you have defined your event has e, but you're using it as event. Thirdly, you should use $(this) in your .each()

This should fix the problem

$('.navlink').click(function(e){
    console.log("HEY");
    var self = $(this);

    $('.navlink').each(function(i) {
        if($(this).hasClass('clickedNav')){ //No need for a period
            console.log("yup");
            $(this).removeClass('clickedNav');
        }
    });

    $(this).addClass('clickedNav');
    e.stopPropagation();
});