- N +

ZBLOGPHP 简版导航高亮!

文章目录 [+]

这个简版导航高亮除了位于文章页时候对应分类不高亮,其他情况都可以使用,主要是js,代码如下:

JavaScript
$(document).ready(function() {
    var s = document.location;
    $("#menu-menu li a").each(function() {
        if (this.href == s.toString().split("#")[0]) {
            $(this).parent("li").addClass("active");
            $(this).parent().parent().parent("li").addClass("active");
            return false;
        }
    });});

首先确保导航结构是li ul li,然后对应修改#menu-menu li a即可。

这个简版导航高亮比较适用于下面这种情况:

Markup
<li class="dropdown"><a href="#">文章分类</a>
  <ul class="dropdown-menu">
    <li id="navbar-category-16"><a href="http://zbp15.com/shuqingsanwen/">抒情散文</a></li>
    <li id="navbar-category-17"><a href="http://zbp15.com/qingganwenzhang/">情感文章</a></li>
  </ul></li>

因为从上面第六行代码中可以看到,li ul li a 被选中后(也就是上面例子中抒情散文或情感文章中任意一个),它的上级跟上两级,也就是两个li标签都会加上“active”这个class

其实不难,只是作为一个存档。。


本文标题:zblogphp 简版导航高亮!
本文链接:http://www.blueyun123.com/?id=56
作者授权:除特别说明外,本文由 madmanyu 原创编译并授权 蓝云之家 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (暂无评论,共206人参与)参与讨论

    还没有评论,来说两句吧...