html 通用导航 笔记

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

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

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

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

下面推荐一个jq的写法

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: