CODEWITHSUNDEEP
javascriptjqueryhtml
Abanoub
Abanoub

Reputation: 3809

adding active class to parent list when link is clicked

adding active class to parent list when link is clicked/active , am trying to inject that using JavaScript as follow:

$(document).ready(
    function()
    {
        //injecting active status to the navigation bar lists
        var element = document.getElementById("navbar-ul");
        var links   = element.getElementsByTagName("a");

        for(var i = 0; i < links.length ; i++) {
            links[i].onclick(function () {
                links[i].parent().addClass('active');
            });
        }
    }
);

but am getting the following error:

TypeError: links[i].onclick is not a function

how I supposed to achieve that?

Upvotes: 0

Views: 114

Answers (3)

Jonas S&#39;jegers
Jonas S&#39;jegers

Reputation: 101

You would be better of with adding a class to the tags who needs an eventListener. (with jquery)

$(document).ready(function() {

    $("#navbar-ul a").on("click", function() {
        var active = document.querySelector('#navbar-ul .active');
        if(active){
            $("#navbar-ul a").removeClass('active');
        }
        $(this).addClass("active");
    });

);

Upvotes: 0

jmore009
jmore009

Reputation: 12923

This is very simply with jQuery:

$("#navbar-ul a").click(function(){
   $(this).parent().addClass("active");       
});

EXAMPLE 1

I'm guessing you're trying to add an active state to the link thats being clicked on and remove the others? If so you can use .siblings() to find the other links and remove their class:

$("#navbar-ul a").click(function(){
   $(this).closest("li").addClass("active").siblings("li").removeClass("active");   

});

EXAMPLE 2

Upvotes: 0

scniro
scniro

Reputation: 16989

A more verbose JQuery way to approach this

$('#navbar-ul a').each(function() {
    $(this).on('click', function() {
        $(this).parent().addClass('active');
    });
});

Upvotes: 3

Related Questions