相关：《当前页面菜单高亮》
这篇文章早就该发布出来，因为确实很多新手在制作zblogphp模板的时候不懂得高亮显示所在分类菜单，今天就详细来分享下，这篇zblog导航高亮文章主要来自于涂涂tblog5主题，我只是稍作修改，更加完善！
功能齐全：
1、首页时，首页菜单高亮
2、主分类以及主分类文章时，主分类菜单高亮
3、子分类以及子分类文章时，子分类的主分类菜单高亮（zblog用了子分类时基本都支持子分类下拉，所以设置为主分类菜单高亮）
4、页面时，页面菜单高亮（比如留言板，联系我们等页面）
下面分享代码：（注：仅适合于zblogPHP模板）
1、导航菜单模板代码：
<div id="monavber" data-type="{$type}" data-infoid="{if $type=='category'}{if $category.RootID}{$category.RootID}{else}{$category.ID}{/if}{/if}{if $type=='article'}{if $article.Category.RootID}{$article.Category.RootID}{else}{$article.Category.ID}{/if}{/if}{if $type=='page'}{$article.ID}{/if}{if $type=='tag'}{$tag.ID}{/if}">
<ul class="navbar">
{module:navbar}
</ul>
</div>其中必须加哪些呢？我截图说明，以上方代码为例：
画了红线的都是添加的，当然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就是第一步里截图中的<ul class="navbar">
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<b.length;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<b.length;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模板菜单最后的高亮效果：
