zblog实现分类导航当前位置页面高亮显示

godkings · 发表于 2022-3-25 14:31:50

zblog想要当前位置导航高亮显示，还只能用js来实现，其他方法都感觉太过于复杂，不过js实现也挺好，对网站没有什么影响，对SEO优化也是友好的。实现导航分类当前页面高亮显示可以有2这种方法。

方法一：
直接将下面的代码放在header或footer文件里面都可以。

<script>
$(function(){
var surl = location.href;
var surl2 = $(".place a:eq(1)").attr("href");
$("#nav ul li a").each(function() {
if ($(this).attr("href")==surl || $(this).attr("href")==surl2) $(this).parent().addClass("on")
});
});
</script>

复制代码

这种方法显得简单，首先你的导航栏必须有个id属性为“nav”，然后你网站还得有个面包屑导航class属性为“place”，大致意思就是判断当前页面中的“面包屑导航（即当前位置）.place这个class”是否和浏览器地址栏的网站是否一样，如果一样就在class里面加上一个“on”，另外自己去写一下on的css代码即可，也可以用下面的：

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

复制代码

方法二：
先引入jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

复制代码

在header或footer文件里面添加代码：

<script type="text/javascript">
$("#menu>ul>li>a").each(function() {
if ($(this).attr("href").toLowerCase().replace(/\/|[&#].*/g,"") == document.URL.toLowerCase().replace(/\/|[&#].*/g,"")){
$(this).attr("class","current"); //给当前页的<a>加上class="current"，如<a class="current">首页</a>
}
});
</script>

复制代码

之后添加上面的js代码，再给添加进去的样式.current进行css美化，最后重建文件即可实现高亮显示效果。

zblog实现分类导航当前位置页面高亮显示

相关帖子