html 通用导航 a连接跳转时给当前导航添加选中颜色

学习前端的同窗或许会遇到这个问题

作一个基本的小站有几个导航的,以下图

不管有几个页面,这里的导航的样式都是同样,惟一不一样的就是进入哪一个页面时当前有个选中的样式

通常这样通用的导航在开发的时候都会封装,而后公用的地方就引用,可是在跳转的时候这个选中的效果就比较棘手了

固然了也有一个简单的方法,就是每一个页面复制一个导航,而后给当前页面的连接里加上class

下面推荐一个jq的写法

$(".nav li a").each(function () {
    if ($(this)[0].href == String(window.location)) {
        $(this).addClass("on").siblings().removeClass("on");
    }
});

这样就能解决了, 演示地址:   https://xibushijie.github.io/static/href/1.html