CODEWITHSUNDEEP
javascriptjqueryhtml
Paul
Paul

Reputation: 11746

changing active class for list element

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...

Upvotes: 4

Views: 17000

Answers (5)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

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

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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/

Upvotes: 10

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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

Upvotes: 1

Cristian Bitoi
Cristian Bitoi

Reputation: 1557

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

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

Upvotes: 1

Related Questions