改寫後的標題：基於域名而非路徑突出顯示導航菜單鏈接，除了一個頁面

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 讓我部分地到達了那裡，但是如果我離開主頁，我就會丟失「目前」類別。

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

我正在尋找一種方法，將「目前」類別保留在網站每個頁面的第一個連結上，然後僅在該頁面上時切換到第二個連結。

Answer 1

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

.current
{
  background-color: green;
}

Pure Luxury Beauty
PL Pro