如何使用jquery从所有子语句中删除一个类？

HTML

<ul class="nav">
                        <li class="active" id="account-overview">
                            <a href="javascript:void(0)">
                                <i class="icon-home"></i>
                                Overview </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" id="account-settings">
                                <i class="icon-settings"></i>
                                Account Settings </a>
                        </li>
                        <li>
                            <a href=" /demo-home19/resellers/logout" >
                                <i class="icon-settings"></i>
                                Logout </a>
                        </li>

  </ul>

I want to add 'active' class of clicked <li> link and remove all 'active' class from sublings.

我想添加点击

链接的“主动”类,并从子搜索中删除所有“活动”类。

I tried as follows:

我尝试如下:

$(document).ready(function(){
 $('#account-settings').on('click',function(){
    $(this).addClass('active').siblings().removeClass('active');
 });
});

It adds 'active' class to clicked item but not remove 'active' from sublings

它为点击的项添加“活动”类,但不从子搜索中删除“活动”

3 个解决方案

#1

try:

  $('#account-settings').on('click',function(){
       var li = $(this).parent('li')
        li.parent().find('li').removeClass('active');
        li.addClass('active');

     });

or:

 $('#account-settings').on('click',function(){
       var li = $(this).parent('li')
        li.siblings().removeClass('active');
        li.addClass('active');

     });

or

 $('#account-settings').on('click',function(){
       $(this).parent('li').addClass('active').siblings().removeClass('active');
     });

#2

Use this instead of id #account-settings

使用此代替id#account-settings

$('ul li').on('click',function(){....
....

#3

You may try doing

你可以试试

$('.nav').children('li').on('click',function(){
  $('.nav').children('li').removeClass('active');
  $(this).addClass('active');
});