提供zblog模板_zblog主题_wordpress模板的下载和定制

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

天兴工作室 2013-05-19 04:37 教程 8104 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;
}

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

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


没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录