Priyanka Priyanka - 4 months ago 15
CSS Question

how to set active class to nav menu from twitter bootstrap

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 -
enter image description here

after clicking on other menu item i get following result-
enter image description here

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

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');
    });
Comments