Uno dei compiti comuni nella creazione di un sito web è quello di evidenziare la pagina corrente nel menu di navigazione. Questo aiuta gli utenti a capire in quale sezione del sito si trovano e a mantenere un'esperienza di navigazione coerente. In questo articolo, mostreremo come creare una semplice funzione JavaScript per evidenziare la pagina corrente nel menu di navigazione.
Creiamo una funzione JavaScript che identifichi il link corrispondente alla pagina corrente e gli assegni una classe aggiuntiva per l'evidenziazione.
function highlightCurrentPage() {
const currentPageUrl = window.location.href;
const menuItem = document.querySelector('#menu a[href="' + currentPageUrl + '"]');
if (menuItem) {
menuItem.classList.add('active');
}
}
La prima riga di codice dichiara una variabile chiamata currentPageUrl e le assegna il valore dell'URL della pagina corrente utilizzando window.location.href. window.location è l'oggetto che rappresenta l'URL della pagina corrente nel browser.
La seconda riga di codice utilizza il selettore di query di CSS per selezionare un elemento nel documento HTML con un ID di menu e un elemento a con un attributo href che corrisponde all'URL della pagina corrente. In pratica, cerca un link nel menu di navigazione che punta all'URL della pagina corrente.
La terza riga di codice controlla se è stato trovato un elemento corrispondente utilizzando il selettore di query. Se menuItem è diverso da null (cioè se è stato trovato un elemento corrispondente), viene eseguito il blocco di codice all'interno dell'istruzione if.
All'interno del blocco if, viene aggiunto un nome di classe active all'elemento menuItem. La classe active può essere utilizzata per applicare uno stile speciale al link del menu corrispondente alla pagina corrente.