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, testare applicazioni con XUnit
views 544
Come tutti sappiamo con l’avvento di .Net Core tutto l’ecosistema sta subendo evoluzioni, fin dalla prima versione del progetto ASP.NET MVC Core è sta...
ASP.NET Core, Dependency injection
views 561
In questo articolo parleremo della Dependency Injection, un pattern che consente di creare applicazioni flessibili e semplifica la fase di unit test. ...
ASP.NET Core custom Middleware
views 180
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 319
"Middleware are software components that are assembled into an application pipeline to handle requests and responses. Each component chooses whether t...