Showing posts with label jquery closest. Show all posts
Showing posts with label jquery closest. Show all posts

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..