ZBLOG模板制作导航栏当前分类和页面高亮显示效果

从用户体验上看，我们在点击网站首页的时候在导航栏中首页标签是和其他分类有差异的，比如字体加粗、颜色不同，这个就是所谓的导航栏高亮效果。比如我们点击某个分类的时候，在当前分类或者当前分类的中的文章，这个分类就显示高亮的。在这里老蒋整理到ZBLOG PHP程序高亮导航的效果，以前都没有做过，这不要精细化，还是需要做的。

这是目前没有加入高亮的代码导航部分。这里我要去参考老白同学的整理文章（http://www.yzktw.com.cn/post/105.html）。

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>

这是代码部分，这里我需要在UL上面的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中的"navbar"这个我们可以自定义，这个后面我们自定义样式时候设置的。

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;
    ib.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;
    ib.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            }
        }
    }
    );
}
    );
    //

JS部分，需要加入引用到站点用，如何引用我们应该知道。

这个时候我们可以看到导航是有变动的，我们后面就是需要加入样式。比如高亮是对.navbar li添加了.active

最后ID中的monavber是默认和JS一致的，如果我们修改也需要修改JS里的。这里我测试是可以的，只是我还没有加样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！