zblog 2.1突出当前分类导航栏目高亮显示
网站文章 2026-09-21 08:11:50 4 0

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;}

最后重建文件即可。

文章说明
本文标签:
©版权声明
本站提供的一切软件、教程和游戏辅助仅限用于娱乐和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集,版权争议与本站无关。如有侵权请邮件与我们联系处理。敬请谅解!6594404@qq.com