zblog php导航菜单高亮 - 分类和页面全部高亮教程

这篇文章早就该发布出来,因为确实很多新手在制作zblogPHP模板的时候不懂得高亮显示所在分类菜单,今天就详细来分享下,这篇zblog导航高亮文章主要来自于涂涂tblog5主题,我只是稍作修改,更加完善!

功能齐全:

1、首页时,首页菜单高亮

2、主分类以及主分类文章时,主分类菜单高亮

3、子分类以及子分类文章时,子分类的主分类菜单高亮(zblog用了子分类时基本都支持子分类下拉,所以设置为主分类菜单高亮)

4、页面时,页面菜单高亮(比如留言板,联系我们等页面)

下面分享代码:(注:仅适合于zblogPHP模板)

1、导航菜单模板代码:

<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>

其中必须加哪些呢?我截图说明,以上方代码为例:

zblogphp导航菜单高亮 - 分类和页面全部高亮教程 zblog模板学习 第1张

画了红线的都是添加的,当然id="monavber"也必须有,id="monavber"在遇到已有id时也可以用已有id,记得修改JS文件中的id即可,但必须对应js文件里的id。

2、下一步就是上JS文件了,JS文件也比较简单:(一定要看清除文件中的//注释说明)

PHP
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

            }

        }

    });});//

解释:高亮时为.navbar li添加了.active。

3、所以最后一步就是在CSS文件里,为.active添加属性,显示出高亮。


您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。