突出显示基于域的导航菜单链接，而不是路径，除了一页

Question

我在 Shopify 站点顶部的菜单中有两个导航链接。 菜单是在管理导航设置中创建/编辑的。 我需要#1 的菜单链接在网站的每个页面上保持突出显示，除非在#2 页面上。

液体看起来像这样：

<span class="inline-menu">
{% for link in linklists[section.settings.menu].links %}
<a class="inline-menu__link" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</span>

然后 html 呈现如下：

<span class="inline-menu">
<a class="inline-menu__link" href="/">Pure Luxury Beauty</a>
<a class="inline-menu__link" href="/pages/pl-pro">PL Pro</a>
</span>

这个 javascript 让我部分到达那里，但如果我离开主页，我就会失去“当前”class。

$(function() {
  $("a").each(function() {
    if ($(this).prop("href") == window.location.href) {
      $(this).addClass("current");
    }
  });
});

我正在寻找一种方法来将“当前”class 保留在网站每个页面的第一个链接上，然后仅在该页面上切换到第二个链接。

Answer 1

 if (window.location.href == 'https://yourdomain.com/pages/pl-pro') { $('#l1').removeClass ('current'); $('#l2').addClass ('current'); }

 .current { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="inline-menu"> <a class="inline-menu__link current" href="/" id="l1">Pure Luxury Beauty</a> <a class="inline-menu__link" href="/pages/pl-pro" id="l2">PL Pro</a> </span>