前端技巧-层级导航高亮

2022-06-06 16:03:50 阅读：167 来源： 互联网

标签：me trim 层级高亮 lochref mehref 前端 rel 导航

<!-- 多层级导航高亮 -->
<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端技巧-层级导航高亮