Evidenziare il link del menù aggiungendo la class current con jQuery

Picture of Nello

Nello

Evidenziare il link del menù aggiungendo la class current con jQuery

E’ utile evidenziare il link del menù della pagina dove ci troviamo con uno stile CSS, ad esempio aggiungendo un bold o cambiando il background-color.

Questa operazione si può effettuare sia server side con PHP, sia client side con l’aiuto di JavaScript (jQuery in questo caso).

Vediamo come fare proprio in jQuery. Ipotizziamo di avere una classe .current

.current { background-color: #000; }

ed un menù

<div class="menu">
    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
        <li><a href="/miapagina.php">LINK 4</a>     
        <li><a href="/index.php/jKf3F/">LINK 5</a>     
    </ul>
</div>

Con qualche semplice linea di codice possiamo aggiungere la classe .current al link del menù comparando l’href con il link che abbiamo nella barra di navigazione.

$(document).ready(function(){
    $(".menu ul li a").each(function(){
        if( $(this).attr("href") == window.location.pathname )
            $(this).addClass("current");
    })
})

Vediamo nello specifico cosa fa questo snippet di codice. Prima di tutto cosa troviamo in windows.location.pathname? Ipotizziamo che il nostro link nella barra di navigazione sia

http://www.nostrosito.it/miapagina.php

in windows.location.pathname (esempio QUI) troveremo quindi /miapagina.php

Lo script non fa altro che confrontare il valore href di tutti gli a del menù con il valore windows.location.pathname. In caso positivo, viene assegnata la classe current al link in questione.

Niente di più facile 🙂