タイトルを書き換え: 1 ページを除き、パスではなくドメイン名に基づいてナビゲーション メニューのリンクを強調表示します。

Question

Shopify サイトの上部のメニューに 2 つのナビゲーション リンクがあります。メニューは管理者のナビゲーション設定で作成/編集します。 #1 のメニュー リンクが、ページ #2​​ を除くサイトのすべてのページで強調表示されたままになるようにする必要があります。

液体は次のようになります:

<span class="inline-menu">
{% リンクリスト [section.settings.menu].links のリンク %}
<a class="inline-menu__link" href="{{ link.url }}">{{ link.title }}</a>
{% 終了の %}
</span>

その後、HTML は次のようにレンダリングされます:

<span class="inline-menu">
<a class="inline-menu__link" href="/">ピュア ラグジュアリー ビューティー</a>
<a class="inline-menu__link" href="/pages/pl-pro">PL プロ</a>
</span>

この JavaScript は部分的にそこに移動しますが、ホームページから離れると、「現在の」クラスが失われます。

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

サイトのすべてのページの最初のリンクで「現在の」クラスを維持し、そのページにいるときのみ 2 番目のリンクに切り替える方法を探しています。

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