#1 Proč?
Zvýraznění odkazu stránky, na které se nacházíme, se často používá u navigací či navigačních panelů, abychom dali uživateli najevo, na jaké stránce se nachází.
To pomáhá k orientaci uživatele na stránce a celkovému lepšímu pocitu z webové stránky
#2 Kód
Jedná se o kód pro JavaScript. Pracuje se skriptem Query, který vybere každý prvek odkazu <a>, funkce forEach zjistí každého odkazu cílovou adresu zapsanou v atributu href a porovná ji s aktuální URL adresou.
Jedná se o samovolací funkci, která se zavolá vždy při načtení stránky.
(function activePage() {
const currentPageUrl = window.location.href;
const links = document.querySelectorAll('a');
links.forEach(link => {
if (link.href === currentPageUrl) {
link.classList.add('active');
}
});
})();
Pokud se cílová adresa shoduje s aktuální adresou, přidělí JS prvku třídu .active, kterou lze v CSS libovolně nastylovat, například takto:
a {
color: gray;
text-decoration: none;
}
a.active {
color: blue;
}