天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

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

天兴工作室 1个月前 (08-23) 教程 200 ℃ 1 评论
内容加载中......

天兴工作室之前有写过一篇“zblogphp导航当前页突出显示的方法”,这个方法出来只对列表页和首页有效,内容页无效。

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

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

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只是给高亮的加了一个字体为红色的效果,具体效果请根据自己网站自行调整。


啰啰嗦嗦说了这么多,如果你不懂js不懂html那么肯定还是云山雾了的...那么欢迎联系我们付费代劳(逃

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

哈哈,本文已有 1 位小伙伴发表了看法:

1#修行者 (游客)  评论于 2016-08-24 12:23:26回应ta
这个方法不错,思路简单,我怎么没想到。

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
天一学院营养即时到账zblog添加分享按钮拉横幅单反预存198元营业厅电影模板免费体验顶踩zblogcsm模板充100送20宽带minituVIP客户验证码爸爸阿里励志网沃校园卡自由列表js特效上传图片超级201如意短信包高校市场3G天翼易通卡emlog教程表单插件蓝色模板zblog更新缓存zblogphp存话费送购物卡wdcp三星i5508武汉大雾
热门模板