Gestire un menu di bootstrap con jQuery

Diciamocelo, Bootstrap è una figata.
Avrei qualcosa da ridire in merito alla insensata e inspiegabile scelta di non garantire la retrocompatibilità con la 2.3.2, ma sostanzialmente Bootstrap è una figata. (l’ho già detto?)

Permette di realizzare velocemente pagine web senza sapere una mazza di css, ma la gestione del menu/nav-tab è abbastanza macchinosa.

Come fare per gestire gli “active” dei vari pulsanti a seconda della parte del sito in cui ci si trova al momento?
Ma con jQuery, naturalmente, che domande…

Piazziamo questa funzione nell’head

$(function(){  
    function stripTrailingSlash(str) {  
        if(str.substr(-1) == '/') {  
            return str.substr(0, str.length - 1);  
        }  
    return str;  
    }

    var url = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);  
    var activePage = stripTrailingSlash(url);

    $('.nav li:not(.dropdown) a').each(function(){  
        var currentPage = stripTrailingSlash($(this).attr('href'));  
        if (activePage == currentPage) {  
            $(this).parent().addClass('active');  
        }  
    });  
});

e ta-daaan!

Alla riga 14 si può modificare la condizione per adattarla ai casi di url con parametri (es. blog.php?id=123) utilizzando

if (activePage.indexOf(currentPage) != -1)

Comunque, cazzomenefrega, io continuerò a usare la 2.3.2