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');
});

小提琴是here。

Answer 3

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

希望，这对你有用..

Answer 4

罗布是对的，但$('ul li.current').removeClass('current');不适合我。以下代码有效。

jQuery('ul li a').click(function() 
{

jQuery('ul').children().removeClass('selected');
jQuery(this).closest('li').addClass('selected');

}

Answer 5

$(function(){

   $('ul li a').click(function(){
      var item=$(this).parent();
       $('ul li').removeClass('current');
       item.addClass("current")
    });

});​

http://jsfiddle.net/z8DYP/3/

Answer 6

只需将类添加到this就像这样......

$(this).addClass('yourClass');

Answer 7

也许你的意思是这个？

$('ul li').each(function(){
  var t = $(this);
  t.find('a').click(function() {
    $('ul li').removeClass('current');
    t.addClass('current');
  });
});