L’altro giorno stavo scrivendo il CSS per un sito dove ci sta un bel menù.

In questo menù, quando si raggiunge una pagina elencata, il link della voce corrispondente doveva cambiare colore e disattivarsi.

Javascript mi è stato utile! Quindi…

Come modificare un link che corrisponde alla pagina visualizzata?

Tramite Javascript ho potuto creare una condizione per cui se nell’url della pagina attuale era contenuta una determinata stringa, cambiavo la classe ad un elemento di mia scelta.

Quindi mi sono basato su 3 righe di codice..

if (location.href.indexOf("url-della-pagina.html") != -1) {
document.getElementById('a').className='nuova-classe';
}

…per determinare quale fosse la pagina attualmente visualizzata, e quindi, in caso di esito positivo, cambiare l’aspetto dell’elemento corrispondente del menu.

Ovviamente ho ripetuto le 3 righe per ogni link del menu; infine le ho messe dopo il codice del menu medesimo.

Vedere il mio vecchio post su come disattivare un link usando css.

Approfondimenti: stackoverflow.com , w3schools.com