相關：《當前頁面菜單高亮》

這篇文章早就該發布出來，因為確實很多新手在制作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模板菜單最后的高亮效果：