Active state management

Question

<ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> 

In a click, I would like to add addclass active to the parent li element, and also remove the active class from any other element that may already be active.

Answer 1

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

Answer 2

 $('div.filter').delegate('a', 'click', function (event) { var theLi = $(this).closest('li'); theLi.siblings('.active:first').removeClass('active'); theLi.addClass('active'); $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show(); event.preventDefault(); });