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

【问题标题】：jQuery add class to current li and remove prev li when click inside li ajQuery将类添加到当前li并在li a内单击时删除prev li
【发布时间】：2018-10-17 22:43:34
【问题描述】：

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

【问题讨论】：

jQuery 有很棒的文档值得一读：api.jquery.com/category/traversing

标签： jquery html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

小提琴是here。

【讨论】：

【解决方案3】：

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

希望，这对你有用..

【讨论】：

用@Rob 的话来说：this 是<a> 元素。

【解决方案4】：

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

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

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

}

【讨论】：

【解决方案5】：

$(function(){

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

});

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

也许你是这个意思？

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

【讨论】：