Simple jquery function to set active navigation link with Twitter Bootstrap

Usually in a web application you would want the user to know which link is active by highlighting the active link. Twitter Bootstrap has a class


that we can use to do this. This class needs to be applied to an

<li> <a href="#"></a> </li>


Html Structure

<ul class="nav">
        <a href="/Home/Index">Index</a>
        <a href="/Home/About">About</a>

Jquery function

$(document).ready(function () {
    $('.nav a').each(function () {
        var url = $(this).attr('href');
        if (currentlocation == url) {

And that’s it! Of course there are a lot many other approaches as well that we can use. This is just a most simplistic to get something up and running in a simple project.