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

时间:2012-03-13 17:13:55

标签: jquery html

这里是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) ...
});

7 个答案:

答案 0 :(得分:34)

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

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

答案 1 :(得分:7)

如果您使用的是最新版本的jquery

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

小提琴是here

答案 2 :(得分:2)

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

希望,这对你有用..

答案 3 :(得分:2)

罗布是对的,但是 $('ul li.current').removeClass('current');对我不起作用。 以下代码有效。

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

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

}

答案 4 :(得分:1)

$(function(){

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

});​

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

答案 5 :(得分:0)

只需将课程添加到this,就像这样......

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

答案 6 :(得分:0)

也许你的意思是这个?

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