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

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

posted @ 2019-02-14 15:21 <_/> 阅读( ...) 评论( ...) 编辑 收藏