在基于URL的子页面上时，将类添加到primary-nav链接

Question

我有主要的导航，它们只是主页上的“页内”链接。我还有一个包含三个页面的定价部分，它们作为带有URL的子页面存在：/pricing/basic-pricing.html、/pricing/pro-pricing.html和/pricing/pricing-premium.html。

在这三个页面上，我有一个导航栏可以在这两个页面之间来回切换。因此，有两个导航元素（主要导航和侧面导航）。当在子页面上，即/pricing/basic-pricing.html时，我希望称为“定价”的primary-nav链接具有活动类。

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

<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您所在的位置，这里是该文档的链接：链接 示例：console.log(location.pathname)&nbsp;// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url在你的情况下// /pricing/basic-pricing.html