JQuery change class when a link is clicked

Question

I'm new to JQuery, I know this question is already answered in other posts but please help me on this, How can i change the class of <li> tag if a link <a> is clicked?

<li class="link" id="home" >
   <a href="admin?main=home">Home</a>
</li>
<li class="link" id="flt" >
   <a href="admin?main=flt">FLT</a>
</li>

This is what i have tried so far:

$('li').click(function() {
    $("li.active").removeClass("active");
    $(this).addClass('active');
});

Please explain me the answer, other posts that is similar to mine doesn't have that much detail so i really don't understand how they do that?

If you're clicking the `a` element, the page location will change so surely changing the class on the `li` is redundant? Unless you've got some code in place which makes an AJAX request on `a.click()` — Rory McCrossan, Sep 18 '13 at 12:33
If the links are navigating, it is useless since the page navigating to the new page will remove the class! — epascarello, Sep 18 '13 at 12:36
@epascarello your right i never thought of that. How can i resolve that? — user2785929, Sep 18 '13 at 13:07

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

When you click on the element, the actual click target is the a element whose default action is to navigate to the resource specified in the href property.

In this case you are registering the click event in the li event, this handler is getting triggered because of event bubbling where an event happening in a descendant element will get bubbled upto the document root.

So the solution here is to prevent the default action of the click event(in this case the navigation of the a element) by calling the .preventDefault() on the event.

var $lis = $('li').click(function(e) {
    $lis.filter(".active").removeClass("active");
    $(this).addClass('active');
    e.preventDefault()
});

edited May 23 '17 at 10:31

Community

1
1

answered Sep 18 '13 at 12:36

Arun P Johny

384,651
66
527
531

I tried to put on a script, but it doesn't work even I remove the resource on the link. – user2785929 Sep 18 '13 at 13:14
the `lis.filter(".active").removeClass("active")` will append a "active" to the class? – user2785929 Sep 18 '13 at 13:19
@user2785929 it removes the `active` class from `li` elements having that class – Arun P Johny Sep 18 '13 at 13:22
so basically this line `$(this).addClass('active');` will appen active to class so the class would be link.active? and `$lis.filter(".active").removeClass("active");` will turn it back to link class only? correct me if i'm wrong – user2785929 Sep 18 '13 at 13:27
how can i save the class if i navigate to the url? the `e.preventDefault()` removes the ability of the link to navigate to the url so i removed that. – user2785929 Sep 18 '13 at 13:43

Irfan TahirKheli · Answer 2 · 2013-09-18T15:01:40.493

1

Use the following script. http://jsfiddle.net/czG8h/

$('.link a').click(function() {
    $("li.active").removeClass("active");
    $(this).closest('li').addClass('active');
});

If you want to persist the active style across the page, then following code will do the trick for you:

 $(document).ready(function() {
        var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");

        ///// Apply active class to selected page link
        $('.link a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                $(this).closest('li').addClass('active');
        });

    });

edited Sep 18 '13 at 15:01

answered Sep 18 '13 at 12:36

Irfan TahirKheli

3,652
1
22
36

what does this line `$("li.active")` means? – user2785929 Sep 18 '13 at 13:20
This means li having class active. ie.

Irfan TahirKheli

Sep 18 '13 at 13:23

seems like this approach doesn't work if the link has a resource, how would i resolve if there is a resource to go with? how would i get the last link selected? the part of the code i posted above is a page header which is included in all of those url in the links. They are sharing same page header – user2785929 Sep 18 '13 at 13:38

The `(document).ready` I'll put it on the header page? and the `$('.link a').each` I'll put on the page that the link will go to? correct me if I'm wrong – user2785929 Sep 18 '13 at 23:13

score 0 · Answer 3 · answered Sep 18 '13 at 12:37

0

Use .closest to get to parent li and add the class active then use siblings to find other li and remove the class active, and use e.preventDefault() to prevent changing page.

$('li a').click(function(e) {
    e.preventDefault();
    $(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});

DEMO

answered Sep 18 '13 at 12:37

Anton

32,245
5
44
54

`e.preventDefault();` stopped my link to navigate to other pages. – user2785929 Sep 18 '13 at 13:32
I see, i thought that was what you wanted, then you can remove e.preventDefault() @user2785929 – Anton Sep 18 '13 at 13:34
If i remove the `e.preventDefault();` it doesn't save the class if it navigate to the url – user2785929 Sep 18 '13 at 13:40

JQuery change class when a link is clicked

3 Answers3