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


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


There is a related question about navigation menus in Django: <a href="https://stackoverflow.com/questions/340888/navigation-in-django" rel="nofollow">Navigation in django</a>

This answer has a good example of using a template tag for adding the classes to the li elements. <a href="https://stackoverflow.com/questions/340888/navigation-in-django/477719#477719" rel="nofollow">Navigation in django</a>


$(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! ;-)


Like this:

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


Just remove "selected" from the class string of <em>all</em> 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'); });


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.


  • Disabling apps using the chrome.management API
  • Google Geocoder Asynchronous Issue
  • jQuery SlideToggle Google Maps Issue
  • How should feature toggles be set in tests run in continuous integration?
  • How to set the navigation bar to the top in Table View?
  • Base Internationalization and “Could not find a storyboard named […]”
  • jQueryMobile, Ajax Navigation, and MVC
  • change color of jstree node
  • Cross platform UI spacing/padding
  • Subclassing QGraphicsItem prevents me from being able to use itemAt() on a QGraphicsScene/View
  • Why cepheus don't send int without quotes to orion?
  • Selenium to click on a javascript button corresponding to a text
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Detect when Facebook like button is clicked
  • Webgrid not refreshing after delete MVC
  • With Hadoop, can I create a tasktracker on a machine that isn't running a datanode?
  • Jquery UI tool tip close icon
  • Database structure design with variable amounts of fields
  • Change multiple background-images with jQuery
  • Highlight one bar in a series in highcharts?
  • Ajax Loaded meta Tags
  • Xamarin Forms - UWP Fonts
  • Regex thinks I'm nesting, but I'm not
  • What is the “return” in scheme?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • Modifying destination and filename of gulp-svg-sprite
  • Sending data from AppleScript to FileMaker records
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • GridView Sorting works once only
  • XCode can't find symbols for a specific iOS library/framework project
  • Arrays break string types in Julia
  • Traverse Array and Display in markup
  • How to disable jQuery.jplayer autoplay?
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • how does django model after text[] in postgresql [duplicate]
  • Cant find why the layout is getting smaller
  • Qt: Run a script BEFORE make