javascript - jquery如何突出显示子菜单

Question

我的菜单和突出显示效果很好，但是当我在某些子页面中时，主菜单项没有突出显示。我的代码:

<ul class="sidebar-nav sidebar-nav-icons">
  <li><a href='/'><i></i>bla bla</a></li>
  <li><a href="Shipments"><i></i>bla bla</a></li>
</ul>

我的脚本:

$(function() {
  var url = window.location.href;
  $(".sidebar-nav-icons a").each(function() {
    if (url == (this.href)) {
      $(this).closest("li").addClass("active");
    }
  });
});

在“发货”页面中，有一个指向下一页的链接，其中包含“发货/发货”链接。当我在“发货”页面时，菜单项会突出显示，但当我在“发货”时，菜单项不会突出显示。如何创建它？谢谢

Answer 1

当您在 URL 和 anchor 的 href 之间进行 equals 比较时，仅当页面相同时才会应用 active 类。

一种可能的方法是检查 URL 是否以 anchor 的 href 开头。

var url = window.location.href;
$(".sidebar-nav-icons a").each(function () {
    if (url.startsWith(this.href)) {
        $(this).closest("li").addClass("active");
    }
});

编辑:如果您使用相对路径，则可以使用 windows.location.pathname 而不是 window.location.href。