how to set active class to nav menu from twitter b

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

For single page sites, the following is what I used. It not only sets the active element based on what's been clicked but it also checks for a hash value within the URL location on initial page load.

$(document).ready(function () {

    var removeActive = function() {
        $( "nav a" ).parents( "li, ul" ).removeClass("active");
    };

    $( ".nav li" ).click(function() {
        removeActive();
        $(this).addClass( "active" );
    });

    removeActive();
    $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );

});

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

Answer 3

I had the same problem... solved it by adding the code shown below to the Into "$(document).ready" part of my "functions.js" file which is included in every page footer. It's pretty simple. It gets the full current URL of the displayed page and compares it to the full anchor href URL. If they are the same, set anchor (li) parent as active. And do this only if anchor href value is not "#", then the bootstrap will solve it.

$(document).ready(function () {         
    $(function(){
        var current_page_URL = location.href;

        $( "a" ).each(function() {

            if ($(this).attr("href") !== "#") {

                var target_URL = $(this).prop("href");

                    if (target_URL == current_page_URL) {
                        $('nav a').parents('li, ul').removeClass('active');
                        $(this).parent('li').addClass('active');

                        return false;
                    }
            }
        }); }); });

Answer 4

For those using Codeigniter, add this below your sidebar menu,

<script>
    $(document).ready(function () {
        $(".nav li").removeClass("active");
        var currentUrl = "<?php  echo current_url();  ?>";
        $('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
    });
</script>

Answer 5

$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

check this out.

Answer 6

I just added a custom class to the ul section named target-active

<ul class="nav navbar-nav target-active">
    <li><a href="/">HOME</a></li>
    <li><a href="find-truck">FIND A TRUCK</a></li>
    <li><a href="our-service">OUR SERVICES</a></li>
    <li><a href="about-us">ABOUT US</a></li>
</ul>

If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.

Add simple one line jquery code to each page to get your desired result

1st link page

$(function(){
    $(".target-active").find("[href='/']").parent().addClass("active");
});

2nd link page

$(function(){
    $(".target-active").find("[href=find-truck]").parent().addClass("active");
});

3rd link page

$(function(){
    $(".target-active").find("[href=our-service]").parent().addClass("active");
});

4th link page

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});