jQuery: Adding class to the li element after the link is clicked, and deselecting all other classes

Question

I am generating menu with such tags:

<div class="animatedtabs">
  <ul>
    {% for item in menu_items %}
    <li><a href="{{ item.url }}" title="{{ item.name }}"><span>{{ item.name }}</span></a></li>
    {% endfor %}
  </ul>
</div>

What I want to do, I want to add class="selected" to li, after the link is clicked, and to remove all other class="selected" on other li's...

Also I wonder, how to show menu in the way, so the first item is selected by default... But then when another linked is clicked, then class="selected" is toggled

After the link is clicked, a new page will load, destroying anything done by the Javascript in the previous page. — SLaks, Mar 12 '10 at 19:33
So, the only way to do this is to generate the needed class on backend? — Oleg Tarasenko, Mar 12 '10 at 19:43
SLaks is right, the href attribute for that anchor tag is apparently being set to some real URL, so once it is clicked, it will take you to the item's URL. You may want to do something server-side to set the class of the li of the current page to selected. — Bob, Mar 12 '10 at 19:45

score 2 · Answer 1 · answered Mar 12 '10 at 19:49

    $(function() {


    $('.animatedtabs ul a').click(function() {

         $('.animatedtabs ul a').removeClass('selected');
         $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

this make all you have asked real! ;-)

score 1 · Answer 2 · answered Mar 12 '10 at 19:33

1

Like this:

$('.animatedtabs li a').click(function() {
    $('.animatedtabs li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    //Do something
    return false;
});

answered Mar 12 '10 at 19:33

SLaks

868,454
176
1,908
1,964

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

There is a related question about navigation menus in Django: Navigation in django

This answer has a good example of using a template tag for adding the classes to the li elements. Navigation in django

edited May 23 '17 at 10:27

Community

1
1

answered Mar 13 '10 at 16:35

Mark Lavin

24,664
5
76
70

score 0 · Answer 4 · answered Mar 12 '10 at 19:33

0

Just remove "selected" from the class string of all the <li> elements, and then add it to the one that's been clicked.

$('li.foo').click(function(li) {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

answered Mar 12 '10 at 19:33

Pointy

405,095
59
585
614

Marcus Whybrow · Answer 5 · 2010-03-13T16:15:00.917

I would say that an even more elegant method is as follows:

$(function() {

    // Make the first list item selected
    $('.animatedtabs li:first').addClass('selected');

    // The first item is automatically deselected when another is clicked
    $('.animatedtabs li').click() {

        // Make the current li selected
        $(this).addClass('selected');

        // Remove the selected class from any currently selected sibling items
        $(this).siblings('.selected').removeClass('selected');

        return false;
    }

});

I have used this method whilst recently creating a direct copy of the Mac OS finder window using just jQuery HTML and CSS for a project I am working on, and it works magically there.

jQuery: Adding class to the li element after the link is clicked, and deselecting all other classes

5 Answers5

Linked