【首页】传奇国际娱乐.城_注册传奇国际线上平台官方网登录就送l67!

QQ二维码

当前位置:首页 » 建站技巧 » 正文

Z-BlogPHP主题导航高亮的方法(附js、php、CSS代码)

208 人参与  2017年05月07日 11:37  分类 : 建站技巧  评论

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

Z-BlogPHP主题导航高亮的方法(附js、php、CSS代码) 建站技巧

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

首先打开模板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加上样式

来源:传奇国际.传奇娱乐(微信/QQ号:2693558149),转载请保留出处和链接!

本文链接:https://www.mtsz2003.com/read/180.html

zblog   建站   网站优化  让你的文章人气暴增,请 给我投稿
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

支付宝:z18zs@sina.com,QQ/微信:2693558149,欢迎打赏!

网站分类

最近发表

标签列表

最新留言

广而告之

狄普官网旗舰店 | 雀后旗舰店 | 攀升兄弟旗舰店 | 林氏木业旗舰店 | 百武西旗舰店

本站[传奇国际.注册就送67]采用Z-Blog系统搭建 | QQ:2693558149 | 浙ICP备15030206号 | 浙公网安备 33108202000189号