在zblog官方文档里面看到的这个,个人拿来使用了下,觉得效果还可以,借花献佛:
让导航突出显示当前页链接条目我们的大致思路是这样的,首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>,然后再用CSS定义就完成了。
步骤如下:
1、将以下代码放置在网站导航代码的后面。修改pageNav为你正在使用的主题导航栏的id名称。
<script type="text/javascript"> $("#pageNav>ul>li>a").each(function() { if ($(this).attr("href").toLowerCase().replace(/\/|[&#].*/g,"") == document.URL.toLowerCase().replace(/\/|[&#].*/g,"")){ $(this).attr("class","current"); //给当前页的<a>加上class="current",如<a class="current">首页</a> } }); </script>
2、将以下css代码放置在正在使用的主题的css文件里面,可以根据实际情况修改css
#menu ul li a.current { background-color:#fff; color:#0B1316; }
好了,文件重建下看看效果。
本站已经使用了这段代码,大家可以参考看看,不过我发现了一个问题,貌似这个效果只在栏目页有效,在内容页没有效果,不晓得是为什么,正在研究在,研究出来了也会发出来的。
相关推荐
- zblog应用中心如何开发票?在zblog应用中心购买应用后开发票流程11-29
- 天兴工作室zblog导航单页插件:每个站长,都需要一个专属导航页!04-26
- zblog内置的cookie调用代码06-19
- 2020年 zblog1.6版本终于上线了03-26
- 怎样让zblog网站的速度变快?05-24
- zblog+宝塔面板设置404的方法05-15
- 终于...zblog导航栏管理插件出来了!11-02
- zblog增加了xss安全更新 如果报错请及时更新文件07-18
- 天兴工作室zblog模板-第一款mip主题!05-08
- zblog右侧栏最新文章调用数量怎么控制?03-11
- zblog的网站标题和副标题是什么?怎么修改?02-09
- zblog应用中心不见了怎么办?zblog重新安装应用中心的办法01-26
- zblog怎么启用开发者模式?启用开发者模式有什么作用?01-19
- 转载:zblog和wordpress哪个更容易被收录?11-25
- zblog的robots.txt怎么写?zblog的robots.txt文件示例下载08-11
- 天兴工作室zblog系列视频教程第六节:缩略图伪静态04-19
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 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
- 标签聚合
- ×1发送邮件服务器×1绿色调×12018×1zblog2.2下载×1主机服务商×1小熙博客×1顶级分类×1首页×1网站头像×1emlogcms模板×1zblog文件×1调用文章×1Swiper文档×1抽屉式下拉导航×1wordpress cms×1调用全部分类×1zblog立即购买×1openssl_pkey_get_public×1超过最大回复层数×1续费2年送2年
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求