导航高亮js版

没有高亮的导航是没有灵魂的，然后开始我们的教程吧。

1、根据《zblog二级导航下拉导航多级导航配置设置教程》设置html代码；

2、给对应的导航ui层添加id属性。

id=divNavBar

3、添加css文件

#divNavBara.on{color:#FCEE8B;}

4、添加js文件

$(document).ready(function(){
vars=document.location
$("#divNavBara").each(function(){
if(this.href==s.toString().split("#")[0]){
$(this).addClass("on")//li下的a标签添加calss="on"
$(this).parent().addClass("lion");//li添加calss="lion"
returnfalse
}
})
})

5、扩展（配合面包屑实现进入文章页面的时候也高亮）

$(document).ready(function(){
vars=document.location;
varss=$(".crumb-nava:eq(1)").attr("href");
varsss=$(".crumb-nava:eq(2)").attr("href");
$("#starlista").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"
returnfalse
}
})
})

6、完工。

这个时候，再去点击导航对应的链接，就会发现，导航高亮已经生效了。