突出顯示基於域的導航菜單鏈接，而不是路徑，除了一頁

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>