Questa lezione virtuale è la prima di una breve serie, e completa il lavoro svolto in aula. In modalità molto simile a quella già sperimentata durante le lezione del corso sarai accompagnato passo a passo nella costruzione del codice.

L'obiettivo è scrivere un piccolo programma javascript che viene eseguito qunado il caricamento del documento html è completato e che contrassegna, assegnadogli la classe active, la voce della barra di navigazione che corrisponde alla pagina caricata. In questo modo il menu bootstrap, oltre a consentire la navigazione tra le pagina, segnala qual'è la pagina aperta in quel momento.

Ecco il codice in questione.

$(document).ready(function(e) {
    var currentUrl = window.location.href;
    $('.navbar-nav a').each(function(index, element) {
        var $el = $(element);
        var url = window.location.href;
        var href = $el.attr('href');
        if (url.indexOf(href) > -1) {
            $el.parent().addClass('active');
        }
    }); 
});

Puoi verificare il risultato collegandoti a: http://sisteminterattivi.altervista.org/sitoboot/index.html