zblog实现导航高亮功能的方法

经常玩ZblogPHP的用户是不是经常在主题里发现主题自带导航高亮功能，并且还可以给文章页加上当前分类的高亮，下面我们来看看，这种方法到底是怎么实现的呢，是不是很炫酷呢。

首先我想说一下，这是我在制作主题过程中遇到的问题，我是想给我的主题加上导航高亮的小功能，要是没有这功能主题怎能变得有特色，于是我借鉴了许多主题模板后，得出了方法和代码：

首先打开模板template文件夹，找到所存放导航栏的文件，在导航栏的父级div容器，也可以是header、nav、section等，在class="" 后面加上

data-type="{if $type=='article'}article{elseif $type=='page'}page{elseif $type=='index'}index{else}category{/if}" data-infoid="{if $type=='article'}{$article.Category.ID} {elseif $type=='page'}{$article.ID}{elseif $type=='index'} {else}{$category.ID}{/if}"

加上这串代码后，恭喜你，重要的一步已经完成了。

然后找到模板下script文件夹，找到模板主js，加上如下代码。

jQuery(document).ready(function($){ 
var datatype=$("#hamburgermenu").attr("data-type");
    $(".dhgl>li ").each(function(){
        try{
            var myid=$(this).attr("id");
            if("index"==datatype){
                if(myid=="nvabar-item-index"){
                    $("#nvabar-item-index a:first-child").addClass("on");
                }
            }else if("category"==datatype){
                var infoid=$("#hamburgermenu").attr("data-infoid");
                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]+" a:first-child").addClass("on");
                        }
                    }
                }
            }else if("article"==datatype){
                var infoid=$("#hamburgermenu").attr("data-infoid");
                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]+" a:first-child").addClass("on");
                        }
                    }
                }
            }else if("page"==datatype){
                var infoid=$("#hamburgermenu").attr("data-infoid");
                if(infoid!=null){
                    if(myid=="navbar-page-"+infoid){
                        $("#navbar-page-"+infoid+" a:first-child").addClass("on");
                    }
                }
            }else if("tag"==datatype){
                var infoid=$("#hamburgermenu").attr("data-infoid");
                if(infoid!=null){
                    if(myid=="navbar-tag-"+infoid){
                        $("#navbar-tag-"+infoid+" a:first-child").addClass("on");
                    }
                }
            }
        }catch(E){}
    });
});

这是，在你的导航栏父级div容器加上id hamburgermenu，然后在导航栏ul上加上class dhgl，这时，网站已经能够识别导航所在页面了！

这样一个简单的导航高亮逻辑判断就完成了，要显示出导航高亮，还要加上css样式。

在主题style文件夹上的主题主css样式上加入a标签的样式：

#hamburgermenu .dhgl li a.on{background:#333;color:#fff;}

background和color后面的颜色也是需要自己自定义的，你可以改成自己的颜色，看着不错就可以了哦。

原理：第一步的php判断是通过php的逻辑type判断，首页就显示index，如果是分类页文章页就输出分类id等，然后js判断li的id，是否和php的首页、分类id符合，符合就输出on class，然后css给on加上样式

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知