首页 博客正文

zblog实现导航栏当前页高亮功能js版本

kumb 博客 2021-03-09 17:45:17 230 0

前段时间无意中翻到一个主题的实现这个功能的代码(实在不记得是哪个主题了抱歉),学了一段时间js的我表示突然看懂了...所以就借花献佛把方法发出来,希望能帮助到有需要的朋友。

此方法非常的万能,几乎支持所有的页面(首页、列表页、内容页、单页等),适用性非常好。好了,先上代码再来讲。

js部分:

JavaScript
$(function(){
    var surl = location.href;
    var surl2 = $(".mianbao a:eq(1)").attr("href");
    $("#navbar ul li a").each(function() {
        if ($(this).attr("href")==surl || $(this).attr("href")==surl2) $(this).parent().addClass("on")
    });
});

来尝试解释下上面的代码:

首先你的导航栏必须有个id属性为“nav”,然后你网站还得有个面包屑导航class属性为“place”。

js部分这样理解,遍历面包屑的第二个<a>的url,再查找导航栏里面看有哪个<a>的url和刚才那个面包屑里面的url是一样的,如果一样则可以得出这个为需要高亮的部分,接着给导航栏的需要高亮的<li>里面加一个“on”的class。js部分就完成了。

再加上一个高亮的css:

CSS
#nav ul li.on a{color:red;}

上面的css只是给高亮的加了一个字体为红色的效果,具体效果请根据自己网站自行调整。


我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://www.kumb.cn/3399.html

发表评论

评论列表(0人评论 , 230人围观)
☹还没有评论,来说两句吧...