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.


About Jinish Bhardwaj
Jinish works as a Contractor @ Microsoft, Hyderabad and has more than 8 years of experience in building Web, Windows and Smart Client application for clients across the globe. Apart from that Jinish is also a Microsoft Certified Professional and a Certified SCRUM Master

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: