一般我们会使用$(this).addClass(“add”).siblings().removeClass(“add”);被点击li添加样式,移除兄弟样式这样的方法.
可是我们前端把写好的html页面发给后端集成jsp后失效了,造成这样的原因是jsp页面,头部,底部,内容部分分开封装再集合到一起,导航栏点击后地址栏改变,跳转后会刷新页面,所以使用上面这种方法,部分情况会不奏效.所以提供以下一个简单的方法可解决此问题
首先我们在导航栏,点击跳转的地方使用type拼接一个参数,我这里拼的是下标
var ur =location.href
var type = ur.split('?')[1].split("=")[1];
$(".mainNavs li").eq(type).addClass("activeNav").siblings().removeClass("activeNav");
之后在对应的页面获取到地址栏拼接的参数,作为下标传入,然后在对应下面的li标签添加高亮的class样式即可