Impostazione di una voce di menu attiva basata sull'URL corrente con jQuery

Questo problema si ripresenta continuamente durante la creazione di siti Web: come faccio a determinare la posizione corrente dell'utente in modo da poter evidenziare la sezione attiva nel menu di navigazione? È un'esigenza così basilare ma la soluzione sembra essere reinventata su ogni nuova build.

Ci sono due percorsi principali che puoi intraprendere per risolvere questo problema in modo dinamico, lato server e lato client. Risolvere questo problema sul lato server è bello perché avrai una migliore gestione della pagina richiesta, ma non è sempre pratico. Con un po 'di pianificazione, è abbastanza semplice risolverlo sul lato client utilizzando JavaScript (e facoltativamente jQuery).

Supponiamo che tu abbia un menu di navigazione di base nell'intestazione e desideri cambiare il colore di sfondo della pagina corrente in cui ti trovi.

Idealmente, quando fai clic su Tour e vieni indirizzato alla pagina Tour, desideri che il menu rifletta la tua posizione corrente.

Per farlo usando jQuery, confronteremo l'attributo href di ogni collegamento del menu con l'URL del browser corrente e proveremo a trovare una corrispondenza. Se viene trovata una corrispondenza, imposteremo quell'elemento su attivo aggiungendo una classe al file

  • elemento.

    Il risultato netto di questo esempio molto semplice è simile a questo

    Ad ogni caricamento della pagina, questo script esegue e confronta l'href di ogni collegamento del menu con l'URL della pagina corrente iniziando dopo il nome di dominio e continuando in avanti per tanti caratteri quanti sono presenti nell'href (simile a una funzione startsWith ()). Ciò consente a qualsiasi sottopagina di "Tour" di contrassegnare anche Tour come sezione attiva, ad esempio /tour/section2.html. Quando viene trovata una corrispondenza, l'elemento genitore, in questo caso un file

  • - ha una classe di "attivo" aggiunto ad esso.

    Questa soluzione può essere trovata su jsFiddle per l'uso ed è anche incorporata di seguito. La cosa principale che dovrai cambiare per le tue esigenze è il selettore ".nav" sulla riga 9 di JavaScript. Questo dovrebbe essere modificato per selezionare l'elemento di navigazione che si desidera elaborare.

    Nota che l'esempio jsFiddle non funzionerà perché non puoi effettivamente modificare l'URL nella finestra dei risultati, ma puoi facilmente copiare il codice in un file HTML per provarlo.