jQuery: Simplest method for adding/removing a class between li elements

Question

I have a list of links, and I would like to use jQuery to set the clicked one as active, and have the rest of them remove their class.

My current setup is like this:

html

<ul>
  <li id="li_1" class="active"><a href="#" id="link1">link 1</a></li>
  <li id="li_2"><a href="#" id="link2">link 2</a></li>
  <li id="li_3"><a href="#" id="link3">link 3</a></li>
</ul>

jquery

$("#link1").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").addClass('active');
});
$("#link2").click(function () {
  $("#li_1").addClass('active');
  $("#li_2").removeClass('active');
  $("#li_3").removeClass('active');
});
$("#link3").click(function () {
  $("#li_1").removeClass('active');
  $("#li_2").addClass('active');
  $("#li_3").removeClass('active');
});

Obviously this isn't pretty in the least, and I'd like to have it become an extremely simple and flexible 1-2 liner function. I know this is possible, but unfortunately I don't possess the jQuery-fu that I know many of you do :)

Answer 1

You'll need a way to find the links, for example a class or an ID for the <ul>, so you'll be able to do

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

(the example above should work if all the li's have the class theclass; you don't need an ID or class for the <a>s)

Answer 2

$('ul > li > a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    return false;
});

Or perhaps better would be to place an ID on the <ul> :

$('#myUL > li > a').click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    return false;
});

• http://api.jquery.com/parent/
• http://api.jquery.com/siblings/

Answer 3

use .toggleClass( className ) : - http://api.jquery.com/toggleClass/

Example :

$('#foo').toggleClass(className, addOrRemove);

Answer 4

/* generic selector, you'd want to give the ul an id or something)*/

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

Answer 5

Try (sorry for edits kept getting syntax wrong):

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

Answer 6

It would be easier to move the click handler up to the <li> in this case (since that's where all the work is happening), like this:

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

Give it a try here.