jQuery将类添加到当前li并在li a中单击时删除prev li

Question

这是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>

如果我按'a'链接,它会添加类'当前'来点击li并删除旧的li类？这是我的尝试:

$('ul li a').click(function(){
  $('ul li').removeClass('current');
  ... don't know here (add class to current li) ...
});

Answer 1

使用.parent('li')或.closest('li')选择单击的<li>.

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

Answer 2

如果您使用的是最新版本的jquery,请使用('click')

$('ul li a').on('click', function(){
    $(this).parent().addClass('current').siblings().removeClass('current');
});

这里有一个小提琴.