首先我想说一下,这是我在制作主题过程中碰着的问题,我是想给我的主题加上导航高亮的小功能,假如没有这功能主题怎能变得有特色,于是我借鉴了许多主题模板后,得出了方法和代码:
首先打开模板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加上样式
来源:捷闪站长网,转载请保留出处和链接!
本文链接:http://www.z18zs.com/read/180.html