这篇文章早就该发布出来,因为确实很多新手在制作zblogPHP模板的时候不懂得高亮显示所在分类菜单,今天就详细来分享下,这篇zblog导航高亮文章主要来自于涂涂tblog5主题,我只是稍作修改,更加完善!
功能齐全:
1、首页时,首页菜单高亮
2、主分类以及主分类文章时,主分类菜单高亮
3、子分类以及子分类文章时,子分类的主分类菜单高亮(zblog用了子分类时基本都支持子分类下拉,所以设置为主分类菜单高亮)
4、页面时,页面菜单高亮(比如留言板,联系我们等页面)
下面分享代码:(注:仅适合于zblogPHP模板)
1、导航菜单模板代码:
{module:navbar}
其中必须加哪些呢?我截图说明,以上方代码为例:
画了红线的都是添加的,当然id="monavber"也必须有,id="monavber"在遇到已有id时也可以用已有id,记得修改JS文件中的id即可,但必须对应js文件里的id。
2、下一步就是上JS文件了,JS文件也比较简单:(一定要看清除文件中的//注释说明)jQuery(document).ready(function($){
var datatype=$("#monavber").attr("data-type"); // 这就是第一步骤说明里的id="monavber",保持同步
$(".navbar>li ").each(function(){ //.navbar>li就是第一步里截图中的
try{
var myid=$(this).attr("id");
if("index"==datatype){
if(myid=="nvabar-item-index"){
$("#nvabar-item-index").addClass("active");//这个就是为菜单加的CSS
}
}else if("category"==datatype){
var infoid=$("#monavber").attr("data-infoid");//这里有个id="monavber"
if(infoid!=null){
var b=infoid.split(' ');
for(var i=0;i
if(myid=="navbar-category-"+b[i]){
$("#navbar-category-"+b[i]+"").addClass("active");//这个就是为菜单加的CSS
}
}
}
}else if("article"==datatype){
var infoid=$("#monavber").attr("data-infoid");//这里有个id="monavber"
if(infoid!=null){
var b=infoid.split(' ');
for(var i=0;i
if(myid=="navbar-category-"+b[i]){
$("#navbar-category-"+b[i]+"").addClass("active");//这个就是为菜单加的CSS
}
}
}
}else if("page"==datatype){
var infoid=$("#monavber").attr("data-infoid");//这里有个id="monavber"
if(infoid!=null){
if(myid=="navbar-page-"+infoid){
$("#navbar-page-"+infoid+"").addClass("active");//这个就是为菜单加的CSS
}
}
}else if("tag"==datatype){
var infoid=$("#monavber").attr("data-infoid"); //这里有个id="monavber"
if(infoid!=null){
if(myid=="navbar-tag-"+infoid){
$("#navbar-tag-"+infoid+"").addClass("active");//这个就是为菜单加的CSS
}
}
}
}catch(E){}
});
$("#monavber").delegate("a","click",function(){//这里有个id="monavber"
$(".navbar>li").each(function(){
$(this).removeClass("active");
});
if($(this).closest("ul")!=null && $(this).closest("ul").length!=0){
if($(this).closest("ul").attr("id")=="munavber"){
$(this).addClass("active");//这个就是为菜单加的CSS
}else{
$(this).closest("ul").closest("li").addClass("active");//这个就是为菜单加的CSS
}
}
});
});
//
解释:高亮时为.navbar li添加了.active。
3、所以最后一步就是在CSS文件里,为.active添加属性,显示出高亮。
zblogphp模板菜单最后的高亮效果: