J'ai deux liens de navigation dans le menu en haut de mon site Shopify. Les menus sont créés/modifiés dans les paramètres de navigation de l'administrateur. J'ai besoin que le lien de menu pour le n°1 reste en surbrillance sur chaque page du site sauf sur la page n°2.

Le liquide ressemble à ceci :

<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>

Ensuite, le code HTML est rendu comme suit :

<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>

Ce javascript m'y amène en partie, mais si je quitte la page d'accueil, je perds la classe "actuelle".

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

Je cherche un moyen de conserver la classe "actuelle" sur le premier lien de chaque page du site, puis de passer au deuxième lien uniquement lorsque je suis sur cette page.