如何使用當前元素添加活動類並從所有其他元素中移除

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