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

.active

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

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

tag.

Html Structure

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

Jquery function

$(document).ready(function () {
    $('.nav a').each(function () {
        var url = $(this).attr('href');
        if (currentlocation == url) {
            $(this).closest('li').addClass("active");
        }
    });
});

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.

Online Catalog: My first Git published on Git-hub

Recently been working on getting an end to end implementation of an example that would use ASP.Net MVC4, Twitter Bootstrap and a lot other Microsoft and other open source technologies as a shop window and showcase of these products being used together in harmony.
So here I am with the first check in for “Online Catalog”, an online product catalog with integrated Admin section and shopping cart along with a full order management and reporting functionality.

Please feel free to drop in your comments and or any suggested changes. I will be updating this repository in the time to come with newer functionality being added until its marked complete.

Watch out this space for updated and new code availability!!
https://github.com/JinishBhardwaj/Online-Catalog