Simple jquery function to set active navigation link with Twitter Bootstrap
July 3, 2014 Leave a comment
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.