I have two navigation links in the menu at the top of my Shopify site. Menus are created/edited in admin navigation settings. I need the menu link for #1 to remain highlighted on every page of the site except on page #2.
The liquid looks like this:
<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>
Then the html is rendered as follows:
<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>
This javascript gets me partially there, but if I navigate away from the home page, I lose the "current" class.
$(function() { $("a").each(function() { if ($(this).prop("href") == window.location.href) { $(this).addClass("current"); } }); });
I'm looking for a way to keep the "current" class on the first link on every page of the site and then only switch to the second link when on that page.
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; }