当前位置:首页 » 网络教程 » 正文

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

436 人参与  2017年08月18日 20:55  分类 : 网络教程  评论


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

a061883a42db088c1b69d09592d74255_30_4df2d3cabfaad4b7630df0d437af549c.jpg

代码如下:

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

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


来源:皇族网(微信公众号:新皇族网),转载请保留出处和链接!

本文链接:https://huangzuw.com/post/60.html

本文标签:网络教程  建站技巧  

<< 上一篇 下一篇 >>

  • 评论(0)
  • 相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

© 2017 皇族网版权所有粤ICP备17025864号-2

Top

分享:

支付宝

微信