简单的ZBLOG分类导航高亮显示效果
分类:zblog教程
46
在撰写博客时候,为了突出某个zblog分类栏目,我们需要给该分类栏目的导航条加以高亮度显示,一般是通过分类目录的CCS样式就可以实现,但是zblog并未提供CSS样式,所以我们需要寻找其他的实现办法。经过研究,我们发现,通过jquery和正则表达式的匹配,就可以实现这个效果。
相关代码和操作办法如下:
首先 需要在页面加载jQuery库:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
然后在导航下面添加js代码:
<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美化,
最后重建文件即可实现高亮显示效果。
最新发布
-
zblog响应式新闻自媒体文章主题65号
2026-04-20 -
zblog响应式门户新闻资讯主题64号
2026-04-16 -
zblog响应式自媒体博客主题63号
2026-04-08 -
zblog响应式资讯门户主题62号
2026-04-05 -
zblog响应式文章自媒体资讯主题61号
2026-04-01
热门文章
-
ZBLOG精品手赚APP应用下载主题19号
1235 -
zblog响应式机器设备企业主题10号
1228 -
zblog响应式生活分类信息主题2号
951 -
zblog响应式机械企业外贸主题6号
332 -
简洁大气zblog响应式文章主题52号
314