Seleziona una pagina

Utilizzando bootstrap (e non solo) spesso sorge il problema di selezionare la voce del menu corrispondente alla pagina corrente.

Con questo semplice script è possibile effettuare tale selezione durante l’evento document ready di jquery.

Prendendo per esempio il seguente menu: 

<nav class="navbar navbar-default " role="navigation" id="slide-nav">
       <div class="container">
           <div id="slidemenu">
               <ul class="nav navbar-nav">
                   <li><a href="http://www.dotnetcode.it/">Home</a></li>
                   <li><a href="http://www.dotnetcode.it/chisiamo">Chi Siamo</a></li>
                   <li><a href="http://articoli.dotnetcode.it">Articoli</a></li>
            </ul>
           </div>
       </div>
   </nav>

  

Basterà inserire la seguente funzione:

<script type="text/javascript">
function setNavigation() {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);
            $(".nav a").each(function () {
                var href = $(this).attr('href');
                if ((path.length > 0 && href.indexOf(path) >= 0) || window.location.href.toLowerCase() == href.toLowerCase()) {
                    $(this).closest('li').first().addClass('active');
                }
            });
        }
$(document).ready(function () {
         setNavigation();
       });
</script>

Per vedere un esempio… basta dare uno sguardo al menu di questo sito web!

Saluti

Happy coding!

Altri Articoli

ASP.NET Core custom Middleware
views 224
Nel precedente articolo intitolato ASP.NET Core Middleware abbiamo parlato di cosa sono i middleware ed abbiamo visto come usare i middleware buit-in ...
ASP.NET Core Middleware
views 391
"Middleware are software components that are assembled into an application pipeline to handle requests and responses. Each component chooses whether t...
ASP.NET Core Project Start Up
views 201
Pubblicato nella sezione wiki un nuovo tutorial su ASP.NET Core: ASP.NET Core Project Start Up. Questo tutorial spiega passo passo la creazione di un...
Creare una Applicazione ASP.NET Core con CLI e Vis...
views 326
La nuova versione ASP.NET CORE è ormai arrivata alla RC2 (Release Candidate 2), possiamo dire che i tempi sono maturi e nonostante le continue evoluzi...