how to set active class to nav menu from twitter bootstrap

Question

I'm new to the twitter bootstrap. Using there navigation menus . I'm trying to set active class to selected menu. my menu is -

<div class="nav-collapse">   <ul class="nav">     <li id="home" class="active"><a href="~/Home/Index">Home</a></li>     <li><a href="#">Project</a></li>     <li><a href="#">Customer</a></li>     <li><a href="#">Staff</a></li>     <li  id="broker"><a href="~/Home/Broker">Broker</a></li>     <li><a href="#">Sale</a></li>   </ul> </div> 

I tried following thing after googling on this that i have to set active class on each page from menu like as--

<script>   $(document).ready(function () {     $('#home').addClass('active');   }); </script> 

but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?

After executing application my menu looks -

after clicking on other menu item i get following result-

And i added following scripts on Index view and Broker view ---

<script>   $(document).ready(function () {     $('#home').addClass('active');   }); </script>  <script>   $(document).ready(function () {     $('#broker').addClass('active');   }); </script> 

respectively.

Answer 1

You can use this JavaScript\jQuery code:

// Sets active link in Bootstrap menu // Add this code in a central place used\shared by all pages // like your _Layout.cshtml in ASP.NET MVC for example $('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active'); 

It'll set the <a>'s parent <li> and the <li>'s parent <ul> as active.

A simple solution that works!

---

Original source:

Bootstrap add active class to li

Answer 2

it is a workaround. try

<div class="nav-collapse">   <ul class="nav">     <li id="home" class="active"><a href="~/Home/Index">Home</a></li>     <li><a href="#">Project</a></li>     <li><a href="#">Customer</a></li>     <li><a href="#">Staff</a></li>     <li  id="demo"><a href="~/Home/demo">Broker</a></li>     <li id='sale'><a href="#">Sale</a></li>   </ul> </div> 

and on each page js add

$(document).ready(function () {   $(".nav li").removeClass("active");//this will remove the active class from                                        //previously active menu item    $('#home').addClass('active');   //for demo   //$('#demo').addClass('active');   //for sale    //$('#sale').addClass('active'); });