首页 » 网站推广 » php显示照片代码技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码

php显示照片代码技巧_ZBlogPHP主题导航高亮的方法附jsphpCSS代码

访客 2024-11-24 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

标签:

相关文章

介绍直播新纪元,轻松进入直播的五大步骤

随着互联网技术的飞速发展,直播行业在我国逐渐崛起,越来越多的人选择通过直播这一新兴媒介展示自己、分享生活、传递价值。对于许多新手来...

网站推广 2025-01-03 阅读0 评论0

介绍相机美颜原理,科技与美学的完美结合

随着科技的发展,智能手机的摄像头功能日益强大,美颜相机成为了许多人拍照的首选。美颜相机不仅满足了人们对于美的追求,更在视觉上给人带...

网站推广 2025-01-03 阅读0 评论0

介绍磁铁的制造,科学与艺术的完美结合

磁铁,一种神秘的物质,自古以来就吸引了无数人的目光。它不仅具有独特的磁性,还能在工业、医疗、科研等领域发挥重要作用。磁铁是如何制造...

网站推广 2025-01-03 阅读0 评论0

介绍电瓶激活方法,让电池焕发新生

随着科技的不断发展,电动汽车逐渐成为人们出行的首选。而电瓶作为电动汽车的核心部件,其性能直接影响着车辆的续航里程和行驶体验。新购买...

网站推广 2025-01-03 阅读0 评论0