jquery為當前元素添加激活樣式並且移除其同級的樣式

• 例如該效果圖
  
  

• 該部分的html 代碼如下，有部分thymeleaf 標簽

<div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a class="active-menu" href="index.html"><i class="fa fa-dashboard"></i>HOME</a>
                </li>
                <li th:each="menu : ${menuList}">
                    <a href="#"><i class="fa fa-desktop"></i><span th:text="${menu.dispname}"></span></a>
                </li>
            </ul>
        </div>

• 實現點擊選中的功能，代碼如下

$(".nav >li >a").on("click",function () {
            //當前元素增加選中樣式
            $(this).addClass("active-menu");
            //a 的 父級 li 的所有 同級  下的 子元素 a ，移除樣式
            $(this).parent().siblings("li").children("a").removeClass("active-menu");
        })