经常玩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
这是，在你的导航栏父级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加上样式
来源：捷闪站长网，转载请保留出处和链接！本文链接：http://www.z18zs.com/read/180.html
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。