Question

I have a few lists, and when a user clicks on an item I would like it to change the class to current, but if a users then clicks on another item in the same list to switch that to current and remove the current from the previous item selected.

any quick examples, i know this is probably out there already but couldn’t find a good example.

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

So if you click on item 1 it will be class current, but switch off if you click on item 2.

Answer 1

$('ul#list li').click(function(){
   $(this).addClass('current').siblings().removeClass('current');
});

references

• addClass
• siblings
• removeClass

simple demo

---

It would be easy if you use the li in adding/removing current because of the siblings. But if you wan’t to use the anchors, do it this way,

$('ul#list li a').click(function(){
   var li = $(this).parent();
   li.find('a').addClass('current');
   li.siblings().find('a').removeClass('current');
   return false;
});

or if you just want to use anchors just for the click event and still add/remove current on li, do this,

$('ul#list li a').click(function(){
   var li = $(this).parent();
   li.addClass('current').siblings().removeClass('current');
   return false;
});