首页 » PHP教程 » php文字闪技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码

php文字闪技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码

访客 2024-12-02 0

扫一扫用手机浏览

文章目录 [+]

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

首先打开模板template文件夹,找到所存放导航栏的文件,在导航栏的父级div容器,也可以是header、nav、section等,在class=\"大众\"大众 后面加上

php文字闪技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码

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}\"大众

加上这串代码后,恭喜你,主要的一步已经完成了。

php文字闪技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码
(图片来自网络侵删)

然后找到模板下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

标签:

相关文章

IT系统在现代企业中的运用及其深远影响

随着科技的飞速发展,信息技术(IT)已经渗透到各行各业,成为推动社会进步的重要力量。在现代企业中,IT系统的运用不仅提高了企业的运...

PHP教程 2024-12-25 阅读0 评论0

IT系统技术在现代企业中的应用与挑战

随着信息技术的飞速发展,IT系统技术已成为现代企业核心竞争力的重要组成部分。本文将从IT系统技术的应用现状、优势及挑战三个方面进行...

PHP教程 2024-12-25 阅读0 评论0

IT组织转型,迈向数字化未来的关键步骤

随着信息技术的飞速发展,数字化转型已成为各行各业发展的必然趋势。IT组织作为企业信息化建设的核心力量,其转型对于推动企业整体发展具...

PHP教程 2024-12-25 阅读0 评论0

IT经理在东莞,引领创新发展的先锋力量

随着我国经济社会的快速发展,信息技术产业作为国家战略性新兴产业,正成为推动经济转型升级的重要力量。东莞,这座制造业名城,凭借其独特...

PHP教程 2024-12-25 阅读0 评论0