I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:

HTML

<ul class="additional-menu">
    <li class="active"><a href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>  

jQuery

$("#link2").click(function(){

    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        $(this).addClass('active');
    }
});

Any idea what I'm missing? I'm not even detecting the active class at this point...

I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:

HTML

<ul class="additional-menu">
    <li class="active"><a href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>  

jQuery

$("#link2").click(function(){

    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        $(this).addClass('active');
    }
});

Any idea what I'm missing? I'm not even detecting the active class at this point...

• javascript
• jquery
• html

• 1 Are you running the code at document.ready? – pax162 Commented Oct 27, 2013 at 13:59
• I think you should remove the class="active" from li element. Else the first li will always be active. and then use jQuery to set the active class on click event – Md Ashaduzzaman Commented Oct 27, 2013 at 14:07

5 Answers 5

You could minimize your code to just

$('.additional-menu').on('click','li', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

Demo at http://jsfiddle.net/DvHBp/

There are many problems in the code

//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){

    // additional-menu is not an id it is a class and it is not a descendant of the li element 
    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        //if you are using a if statement then addClass should be outside the if block
        $(this).addClass('active');
    }
});

try

jQuery(function(){
    var $lis = $('.additional-menu > li').click(function(){
        $lis.removeClass('active');
        $(this).addClass('active')    
    });
})

find() get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

You should use

$(this).parent().siblings('#additional-menu li')

because in your html structure #link2 a tag has no descendant of #additional-menu li

You can make something very generic:

<ul class="additional-menu">
    <li class="active"><a href="#l1"> Link1</a></li>
    <li><a href="#l2">Link2</a></li>
    <li><a href="#l3">Link3</a></li>
</ul>

And using this JavaScript:

$(function(){
    $('.additional-menu > li').click(function(){
        $('.additional-menu > li').removeClass('active');
        $(this).addClass('active');
    });
});

Try this solution :

HTML:

<ul class="additional-menu">
    <li><a id="link1" href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

CSS:

.active{
    background-color : red;
}

jQuery:

//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

Demo