时间戳

首页 > 解决方案 > 在基于 url 的子页面上向主导航链接添加类

javascript - 在基于 url 的子页面上向主导航链接添加类

问题描述

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

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

我让它与下面的代码一起工作，但想知道是否有更好的方法，以防我将来添加更多子页面。我不想为了容纳一个新页面而添加更多的 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');
  });
});

标签： javascriptjquery

解决方案

您可以使用location全局对象来检测您所在的位置，这里有一个链接 t it 文档：url链接示例 ：uri

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

推荐阅读