欢迎访问服务器技术网-www.fuwuqijishu.com

简单代码可以实现ZBLOG分类导航高亮显示效果

网站建设 fuwuqijishu 2年前 (2022-09-04) 134次浏览 0个评论 扫描二维码

在撰写博客时候,为了突出某个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美化,

最后重建文件即可实现高亮显示效果。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Warning: error_log(/www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/#log/log-2119.txt): failed to open stream: No such file or directory in /www/wwwroot/fuwiqijishu/wp-content/plugins/spider-analyser/spider.class.php on line 2900