Titre réécrit : mettez en surbrillance les liens du menu de navigation en fonction du nom de domaine plutôt que du chemin, à l'exception d'une page

Question

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.

Answer 1

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

.current
{
  background-color: green;
}

sssccc

Pure Luxury Beauty
PL Pro