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

ssr

撰写于 2022年 02月 26 日

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

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

{module:navbar}

这是代码部分，这里我需要在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;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

        }

    }

});
});
//

JS部分，需要加入引用到站点用，如何引用我们应该知道。
这个时候我们可以看到导航是有变动的，我们后面就是需要加入样式。比如高亮是对.navbar li添加了.active
最后ID中的monavber是默认和JS一致的，如果我们修改也需要修改JS里的。这里我测试是可以的，只是我还没有加样式。