当在子页面时，将活动类添加到父导航

Question

当用户在基于URL的子页面中时，我需要突出显示父级导航项。

用户目前在页面 foo1-child 上，父级为 foo1 ，因此我需要将活动类添加到 Foo 1 ： http://foo.com/foo1/foo1-child.html

导航：

<ul class="main-nav">
  <li><a href="/foo.com/foo1.html">Foo 1</a></li>
  <li><a href="/foo.com/foo5.html">Foo 5</a></li>
</ul>

我没有什么问题可以在导航栏中为链接添加活动类，因为我只需比较.nav li a中的每个href与URL即可，但是如何检查URL是否有匹配的锚链接名称或类似的内容呢？

当前JS代码

  $('.main-nav li > a').each(function () {
    var $this = $(this);
    if ($this.attr('href').indexOf(location.pathname) !== -1) {
      $this.addClass('active');
    }
  });

- Dan Mitchell

---

你正在做的似乎是正确的。你的脚本遇到了什么问题？ - DinoMyte

你能提供更多关于你的应用程序的信息吗？你有后端还是完全是前端应用程序？无论哪种方式，我想路由器可能会对你有所帮助，或者在链接上添加类别的条件语句。但是请提供更多信息。 - Rupert

我无法访问后端代码，而且该应用程序没有使用任何JavaScript MVC框架，只有jQuery。 - Dan Mitchell

@DanMitchell - 你的JS对我起作用了！我一直在找一个能够处理我的子页面的JS代码。我不知道为什么它对你不起作用，但我想让你知道它至少对我（在自定义WordPress站点上）起作用了。谢谢！ - Laura Sage

Answer 1

如果你从两个链接末尾都去掉“.html”，然后在位置中搜索a标签的href属性（应该更短），它就可以工作了。

  $('.main-nav li > a').each(function () {
    var $this = $(this);
    var loc = location.
    if (location.pathname.replace(/\/[^\/]*\.html$/, '').startsWith($this.attr('href').replace(/\.html$/, ''))) {
      $this.parent().addClass('active');
    }
  });

您可以在此处“实时查看”它：https://jsfiddle.net/c8u2f91v/请注意，它使用的是虚假的location_pathname而不是location.pathname，因为jsfiddle在路径中没有必要的前缀，但它显示它应该工作。

- Gavriel

---

已更改。如果仍然不可行，请在问题中添加更多可能页面和可能的面包屑链接示例。 - Gavriel

抱歉，我添加了路径名。 - Gavriel

看起来问题出在 CodePen 上。URL 类似于：/boomerang/d64e88d0d8c483755855f22336dcd9f71454177965519，因此比较无法正常工作。 - Gavriel