首页 > 文章资讯 > 技术教程 > zblog教程 > zblog 导航高亮js版

zblog 导航高亮js版

时间：2023年09月19日

来源：网络

编辑：佚名

没有高亮的导航是没有灵魂的，然后开始我们的教程吧。
1、根据《zblog二级导航下拉导航多级导航配置设置教程》设置html代码；
2、给对应的导航ui层添加id属性。
点击复制代码 ActionScript
id=divNavBar
3、添加css文件
点击复制代码 ActionScript
#divNavBar a.on {color: #FCEE8B;}
4、添加js文件
点击复制代码 ActionScript
$(document).ready(function() {
var s = document.location
$("#divNavBar a").each(function() {
if (this.href == s.toString().split("#")[0]) {
$(this).addClass("on") //li下的a标签添加calss="on"
$(this).parent().addClass("lion"); //li添加calss="lion"
return false
}
})
})
5、扩展（配合面包屑实现进入文章页面的时候也高亮）
点击复制代码 PHP
$(document).ready(function() {
var s = document.location;
var ss = $(".crumb-nav a:eq(1)").attr("href");
var sss = $(".crumb-nav a:eq(2)").attr("href");
$("#starlist a").each(function() {
if (this.href == s.toString().split("#")[0] || this.href == ss || this.href == sss) {
$(this).addClass("on") //li下的a标签添加calss="on"
$(this).parent().addClass("hover"); //li添加calss="lion"
return false
}
})
})
6、完工。
这个时候，再去点击导航对应的链接，就会发现，导航高亮已经生效了。

新闻资讯更多

猜你需要