- N +

zblogphp导航高亮代码分享教程

导航高亮如本站演示,首页、列表页、文章页均可高亮。因为本站的主题是一个免费的zblogphp主题,所以一些好的东西可能没有,所以只好自己研究,本身自带导航高亮的功能,但是只有首页和列表页才有高亮显示,于是在zblog论坛寻找教程,找到一个教程是涂涂研版写的,但是自己研究一天,没有实现。比较沮丧,本想放弃这个功能,但是不甘心,所有又尝试了一下,导航高亮终于成功了,要感谢一下天兴工作室的指导。具体教程如下:

.js代码如下:

//dhgl
jQuery(document).ready(function($){ 
var datatype=$("#dhmenu").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("on2");
                }
            }else if("category"==datatype){
                var infoid=$("#dhmenu").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("on2");
                        }
                    }
                }
            }else if("article"==datatype){
                var infoid=$("#dhmenu").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("on2");
                        }
                    }
                }
            }else if("page"==datatype){
                var infoid=$("#dhmenu").attr("data-infoid");
                if(infoid!=null){
                    if(myid=="navbar-page-"+infoid){
                        $("#navbar-page-"+infoid+" a:first-child").addClass("on2");
                    }
                }
            }
        }catch(E){}
    });
});

对应的id 列表标签必须对应,否则无效。文章页导航演示图。

zblogphp导航高亮.png

其实教程到这仅仅是第一步,他们把教程写到这里就结束了,重要的是如果调用data-type="" data-infoid=“”这里的标签,这就是我一直不成功的原因,不知道如果调用标签,然后在zblog查找标签文档,测试N+1遍才算是成功。找到模版header.php,编辑。

找到导航<div>标签,找到对应的标签栏目,这里如家增加两个代码:

<div id="dhmenu" class="nav" data-type="article"  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'}{elseif $type=='search'} {else}{$category.ID}{/if}">

<ul class="dhgl">{module:navbar}<div class="clear"></div></ul>

</div>

div增加 id="dhmenu" 

ul增加  class="dhgl"

然后保存模板文件,后台刷新缓存,OK!

大概说一些js的文件代码的意思,打开网站,首先判断是页面,如果是列表页,则加载列表页代码,增加class=“on2”

如果是文章页,判断上级分类ID,然后加载class="on2"

zbp导航高亮代码修改完毕,有什么不懂的可以留言给我,有好东西大家分享

有好的文章希望李洋博客帮助分享和推广,猛戳这里我要投稿

返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (已有6条评论,共2702人参与)参与讨论
    网友昵称:luojunjin
    luojunjin游客1年前 (2017-08-13)回复
    太好了 找了很久终于找到了
    网友昵称:小锋博客
    小锋博客游客2年前 (2016-04-25)回复
    吓得我菊花一紧...都是elseif?else去哪了?这判断真的是。。。
    网友昵称:非李莫属
    非李莫属管理员2年前 (2016-06-24)回复
    @小锋博客 当初的写法,现在当然不能那么写了,完全是错误的写法。
    网友昵称:访客
    访客游客3年前 (2015-12-28)回复
    没成功,代码不一样啊。
    网友昵称:访客
    访客游客3年前 (2015-12-24)回复
    挺好用,但是不太懂代码。
    网友昵称:非李莫属
    非李莫属管理员3年前 (2015-12-25)回复
    @访客 慢慢尝试,不懂的就留言。