前端技巧-层级导航高亮

<!-- 多层级导航高亮 -->
<script>
  $(function () {
    //trim() 方法用于删除字符串的头尾空格。
    var lochref = $.trim(window.location.href);// 获得当前页面的URL
    $("#nav li a").each(function (i) { //获取导航栏中每个a标签
      var me = $(this);
      var mehref = $.trim(me.get(0).href);//获得每个<a>的url
      /*判断当前url是否包含每个导航特定的rel  lochref == mehref是为了专门判断首页  */
      if (lochref.indexOf(me.parent().attr('rel')) != -1 || lochref == mehref) {
        me.parent().addClass("on");
      } else {
        me.parent().removeClass("on");
      }
    });
  });
</script>

应用于多层级导航高亮

注意：

1.需要提前引入jquery

2.html页面导航最外层设置 id = "nav"

3.设置 li rel 的值

比如：

<ul id="nav">
    <li rel="index"><a href="/">首页</a></li>
    <li rel="jiejue"><a href="/jiejuefangan.html">解决方案</a>
        <div class="sub">
            <ul>
                <li><a href="/jiejue-12-1.html">数字核电</a></li>
                <li><a href="/jiejue-22-1.html">轨道交通</a></li>
                <li><a href="/jiejue-8-1.html">智慧医疗</a></li>
                <li><a href="/jiejue-9-1.html">智慧校园</a></li>
            </ul>
        </div>
        <!--这段是产品分类begin-->
    </li>
</ul>

标签：me,trim,层级,高亮,lochref,mehref,前端,rel,导航
来源： https://www.cnblogs.com/thongyan/p/16348495.html