天兴工作室之前有写过一篇“zblogphp导航当前页突出显示的方法”,这个方法出来只对列表页和首页有效,内容页无效。
前段时间无意中翻到一个主题的实现这个功能的代码(实在不记得是哪个主题了抱歉),学了一段时间js的我表示突然看懂了...所以就借花献佛把方法发出来,希望能帮助到有需要的朋友。
此方法非常的万能,几乎支持所有的页面(首页、列表页、内容页、单页等),适用性非常好。好了,先上代码再来讲。
js部分:
<script> $(function(){ var surl = location.href; var surl2 = $(".place a:eq(1)").attr("href"); $("#nav ul li a").each(function() { if ($(this).attr("href")==surl || $(this).attr("href")==surl2) $(this).parent().addClass("on") }); }); </script>
来尝试解释下上面的代码:
首先你的导航栏必须有个id属性为“nav”,然后你网站还得有个面包屑导航class属性为“place”(zblogphp面包屑导航的集合写法)。
js部分这样理解,遍历面包屑的第二个<a>的url,再查找导航栏里面看有哪个<a>的url和刚才那个面包屑里面的url是一样的,如果一样则可以得出这个为需要高亮的部分,接着给导航栏的需要高亮的<li>里面加一个“on”的class。js部分就完成了。
再加上一个高亮的css:
#nav ul li.on a{color:red;}
上面的css只是给高亮的加了一个字体为红色的效果,具体效果请根据自己网站自行调整。
啰啰嗦嗦说了这么多,如果你不懂js不懂html那么肯定还是云山雾了的...那么欢迎联系我们付费代劳(逃
相关推荐
- zblog导航栏管理设置的几种方法03-11
- zblog下拉导航所需代码最简单的写法!12-25
- zblog导航栏怎么设置?zblog导航栏的逻辑!09-04
- zblog导航栏分类如何添加和修改?05-20
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1emlog分类链接×1标签优化×1cms×1祝乐高×1zblogasp转换×1游戏咨询网站×1主题配置×1ytcms下载×1固定域名×1上传图片×1又拍×1主题安装×1zblog问答模板×1网络公关×1zblogphp调用栏目×1zblog-wiki×1友言×1zblog后台版权×1仿煎蛋×1天兴工作室小程序
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 1 位网友评论:
修行者 8年前 (2016-08-24) 回复
这个方法不错,思路简单,我怎么没想到。