Umgeschriebener Titel: Hervorhebung von Navigationsmenü-Links basierend auf dem Domänennamen statt dem Pfad, mit Ausnahme einer Seite
P粉517475670
P粉517475670 2024-03-20 10:43:49
0
1
309

Ich habe im Menü oben auf meiner Shopify-Website zwei Navigationslinks. Menüs werden in den Admin-Navigationseinstellungen erstellt/bearbeitet. Ich möchte, dass der Menülink für Nr. 1 auf jeder Seite der Website außer auf Seite Nr. 2 hervorgehoben bleibt.

Die Flüssigkeit sieht so aus:

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

Dann wird der HTML-Code wie folgt gerendert:

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

Dieses Javascript bringt mich teilweise dorthin, aber wenn ich von der Startseite weg navigiere, verliere ich die „aktuelle“ Klasse.

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

Ich suche nach einer Möglichkeit, den „aktuellen“ Kurs auf dem ersten Link auf jeder Seite der Website beizubehalten und dann auf dieser Seite nur zum zweiten Link zu wechseln.

P粉517475670
P粉517475670

Antworte allen(1)
P粉792026467

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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage