Question

如何通过JS来增加a标签的class样式

比如说我现在有以下菜单栏:
<li class="nav-item has-treeview ">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-cubes"></i>
<p>
固定资产管理
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/admin/Assets/AssetsAllot" class="nav-link">
<i class="fa fa-warehouse nav-icon"></i>
<p>库房管理</p>
</a>
</li>
<li class="nav-item">
<a href="/admin/Assets/AssetsAllot" class="nav-link">
<i class="fa fa-pallet nav-icon"></i>
<p>资产调拨管理</p>
</a>
</li>
<li class="nav-item">
<a href="/admin/Assets/AssetsInfo" class="nav-link">
<i class="fa fa-boxes nav-icon"></i>
<p>资产信息管理</p>
</a>
</li>
</ul>
</li>
我现在是想通过JS控制li class="nav-item"下的a标签,如果被点击增加addClass("active")的样式,如果用户选择其他项则removeClass("active"),脚本应该怎样编写?

Answer 1

$(function(){
$(document).on("click",".nav-item>a",function(){
$(this).addClass("active").parent(".nav-item").siblings(".nav-item").children("a").removeClass("active")
})
})
如果好使，请给个采纳

追问

感谢,完美解决!

Answer 2

静态页面的话，判断url吧，然后通过当前url变化，来增加和删除，动态页面带数据库的话，可以直接判断当然栏目id来增加active

追问

动态页面,菜单是动态生成的,没有ID

Answer 3

$('.nav-item a').click(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active')
})