JQuery set active link

Question

i have a horizontal CSS Menu with this JQuery code:

function setActiveLink(target) {
        $(".MenuLink").removeClass("active");
        $('a[href=' + target + ']').addClass("active");
        //$('.tabcontent').addClass('hide');
        $(target).removeClass('hide');
    }

    $(document).ready(function(){
    $('.MenuLink').click(function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        document.location.hash = target;
        setActiveLink(target);
    });
    });

i want to set an active class on the clicked link (and remove all other active classes)

also, i want to be able to add the active class on the parent item when a sub menu item is clicked.

i tried creating the above function, but it doesnt add the class

Answer 1

Use some CSS:

.navbar-list .active a {  

 text-decoration: none;  // remove underline 

 // maybe more here, I don't know your intent

}

You may need a bit more CSS if e.g. you don't want colors for active/visited/hover, etc.

You can simplify your code a bit too. Your selectors are over-specified. I seldom use .parent() it's too fragile in case you change your HTML structure. I prefer to use .closest().