Question

I have a UL in html which as following :

<ul class="most-populer">
  <li><a id="popular" class=" " href="#">Most Popular</a></li>
  <li><a id="price" href="#" class=" ">Price</a></li>
  <li><a id="rating" href="#" class=" ">Star Rating</a></li>
  <li><a id="alphabetic" href="#" class="active">Name</a></li>
</ul>

I am using an ajax function to filter result based on these search criteria . thats working fine for me . Now what i want that if user clicks on popular then only popular anchor tag have active class and removes from other anchor tag.

I know about addClass() and removeClass() method of jquery

but i want to use them in that way if user clicks on any of link that UL only that anchor have active class.

Answer 1

jsFiddle demo

$('ul.most-popular li a').click(function( e ){
    e.preventDefault(); // prevent def. anchor behavior !
    $('ul.most-popular').find('.active').removeClass('active');
    $(this).addClass('active');
});