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

之前也写过一个关于导航栏根据网址,识别导航栏跟网址一致的话就高亮《http://www.adaboke.com/post/63.html


接下来介绍此方法非常的万能,几乎支持所有的页面(首页、列表页、内容页、单页等),适用性非常好。他是根据网页的“当前位置第二个网址判断高亮的”


好了,先上代码再来讲。


js部分:

<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”(zblogphp面包屑导航的集合写法)。

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


再加上一个高亮的css:

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


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

您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。