検索

ホームページ  >  に質問  >  本文

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

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 番目のリンクに切り替える方法を探しています。

P粉517475670P粉517475670287日前352

全員に返信(1)返信します

  • P粉792026467

    P粉7920264672024-03-21 10:04:37

    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
    

    返事
    0
  • キャンセル返事