建站技巧:教你做简版导航高亮方法教程!

皇族网 570 0


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

建站技巧:教你做简版导航高亮方法教程!-第1张图片-皇族网

代码如下:

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

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


标签: 网络教程 建站技巧

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~