注册 登录 提供zblog模板_zblog主题_wordpress模板的下载和定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:首页 > 教程 正文

zblog让导航突出显示当前页链接栏目

天兴工作室 2013-05-19 教程 7431 ℃ 0 评论

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

好了,文件重建下看看效果。

本站已经使用了这段代码,大家可以参考看看,不过我发现了一个问题,貌似这个效果只在栏目页有效,在内容页没有效果,不晓得是为什么,正在研究在,研究出来了也会发出来的。

这么好的文章居然暂无评论!来一个吧...

欢迎 发表评论

这是标题

这是标题

这是标题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

微信公众号
  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章