html 通用导航 笔记

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

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

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

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

下面推荐一个jq的写法

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