在基于url的子页上将类添加到主导航链接中。

Question

我有主导航，这只是主页上的“页面中”链接。我还提供了三页用于定价的页面，这些页面与urls一起作为子页面存在:/pro/basic-pro ing.html、/pro/pro-pring.html和/pro/pro premium.html。

在这三页上，我有一个侧导航，可以在这三页之间来回走动。所以有两个导航元素(主导航和侧导航)。当在一个子页面上，即/page/basic ing.html上，我希望主-nav链接“page”有一个活动类。

我让它使用下面的代码，但我想知道是否有更好的方法，以防我在未来增加更多的子页面。我不想为了适应新页面而添加更多的jQuery。现在，它只想看看url是否包含href中的字符串“价格”，然后将类添加到主导航中的“价格”链接中。

<nav class="primary-nav">
<ul class="menu collapse vertical large-horizontal">
   <li><a href="#features">features</a></li>
   <li><a href="#options">options</a></li>
   <li><a href="#pricing">pricing</a></li>
   <li><a href="#testimonials">testimonials</a></li>
   <li><a href="#contact">contact</a></li>
</ul>
</nav>

<ul class="vertical menu side-nav">
    <li><a href="{{root}}pricing/basic-pricing.html">Basic Pricing</a></li>
    <li><a href="{{root}}pricing/pro-pricing.html">Pro Pricing</a></li>
    <li><a href="{{root}}pricing/premium-pricing.html">Premium Pricing</a></li>
</ul>

$(document).ready(function () {
  $('.side-nav.menu a.is-active[href*="pricing"]').each(function () {
    $('.primary-nav .menu a[href$=pricing]').addClass('is-active');
  });
});

Answer 1

您可以使用location全局对象来检测您所处的url或uri，下面是一个链接t文档：链接示例：

console.log(location.pathname) 
// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url

在你的情况下

// /pricing/basic-pricing.html