zblog 2.1突出当前分类导航栏目高亮显示
作者:xlnxin发布时间:2021-04-15分类:Zblog教程浏览:853
导读:zblog没有提供导航栏当前分类目录的css样式,因此一般情况下要想给当前分类栏目的导航条高亮显示不能实现,如此一来也导致了一些导航栏效果无法实现。但也并非没有给导航当前...
zblog没有提供导航栏当前分类目录的css样式,因此一般情况下要想给当前分类栏目的导航条高亮显示不能实现,如此一来也导致了一些导航栏效果无法实现。但也并非没有给导航当前分类添加高亮的方法,可以通过jquery和正则表达式匹配实现。下面是具体的操作方法。
实现的操作方法:
给页面加载jQuery库:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
在导航下面添加js代码:
1 2 3 4 5 6 7 | <script type="text/javascript"> $("#menu>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> |
添加上面的js代码后,再给添加进去的样式.current进行css美化,下面是例子,具体的根据自己设计编写:
1 | #menu li a.current {background:#000; color:#fff;} |
最后重建文件即可。
相关推荐
- 微信小程序animation底部弹窗动画css代码
- Z-BlogPHP密码找回工具
- 微信小程序function函数arguments 是什么意思呢?
- JS二维数组对象根据指定key进行排序
- zblogphp使用GetArticleList、GetList函数调用热门文章列表
- 抓包软件Fiddler命令行和HTTP断点调试
- 小程序笔记(一)程序包wxapkg反编译2020.05版
- ZBlog固定网站域名导致网站打不开的解决办法
- ZBlog导入数据库提示unknown character set 'utf8mb4'的原因及解决方案
- PHP开启openssl的方法-解决ZBlog主题插件无法启用的问题
- Zblog教程排行
- 最近发表