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");
    }
  });
});

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

Answer 1

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

一种可行的方法是检查网址是否以锚点开头。

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。

Answer 2

您必须使用startsWith函数而不是相等检查：

＆＃13;

if (url.startsWith(this.href)) {
    // your highlight logic goes here
}

＆＃13;

如何突出显示子菜单jquery

2 个答案: