Tuesday, January 06, 2015

jQuery add class to current li and remove prev li when click inside li a

here is html:
<ul>    
    <li class="current"><a href="#">menu item</a></li>  
    <li><a href="#aba">menu item</a></li>
    <li><a href="#abb">menu item</a></li>
    <li><a href="#abc">menu item</a></li>
    <li><a href="#abd">menu item</a></li>
</ul>


If i will press 'a' link it will addClass 'current' to clicked li and remove old li class

Use .parent('li') or .closest('li') to select the clicked <li>.


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

Try this: Works fine for me..