如何使用当前元素添加活动类并从所有其他元素中移除

Question

我在导航栏中有5个选项。默认第一个选项（仪表板）将处于活动状态。当选择第二个选项时，即（第一个）第一个和第二个选项都被选中。当我点击特定选项时，我只想选择一个选项。如何克服这一点？

<nav class="nav-container showNav"> 
     <ul class="nav-list"> 
      <li class="list-item dashboard"> 
      <a href="#"><i class="active menu fa fa-tachometer" aria-hidden="true"> dashboard </i></a> 
      </li> 
      <li class="list-item motes none-events"> 
      <a href="#"><i class="menu fa fa-desktop"> motes </i></a> 
      </li> 
      <li class="list-item network none-events"> 
      <a href="#"><i class="menu fa fa-usb"> network </i></a> 
      </li> 
      <li class="list-item sensors none-events"> 
      <a href="#"><i class="menu fa fa-edge"> sensors </i></a> 
      </li> 
      <li class="list-item log none-events"> 
      <a href="#"><i class="menu fa fa-bar-chart"> log </i></a> 
      </li> 
     </ul> 
    </nav> 

，这里是我的jQuery

$(document).ready(function() { 
    $(".menu").click(function() { 
     if (!$(this).hasClass("active")) { 
      $(this).addClass("active") 
        .siblings(".menu") 
        .removeClass("active"); 
     } 
    }); 
    $(".motes").click(function() { 
     $(this).siblings(".menu").removeClass("active"); 
    }); 
}); 

Answer 1

试试这个，

$(document).ready(function() { 
$(".menu").click(function() { 
    $(this).addClass("active"); 
    $(".menu").not(this).removeClass("active"); 
}); 

}); 

Answer 2

试试这个代码

$(document).ready(function() { 
    $(document).on('click', '.menu',function() { 
     $('.menu').removeClass("active"); 
     $(this).addClass("active"); 
    }); 
});