How to Set Active Class to Nav Menu from Twitter Bootstrap

how to set active class to nav menu from twitter bootstrap

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

Setting active on class with separate menu file

I figured out the answer, well, work around. This way I think is better anyway and also better code management. I had it backwards. I was trying to insert the menu and footers into every page. What I should be doing, and am now doing, is injecting the links into the index page that contains the menu and footer. After changing around some code it works perfect. For the those of you who may have this same question, or problem, the JS code for the menu is

//Load MENU HTML file
$(function () {
    $("#myNavbar li").click(function (e) {
        e.preventDefault();
        $('#myNavbar li').removeClass('active');
        $(this).addClass('active');
    });
});

The js code for loading the links into the page (also loads the about.html when the page is loaded) is

//MENU LINKS
$(document).ready(function () {
    $("#include").load("about.html");

    $("#about").on("click", function () {
        $("#include").load("about.html");
    });
    $("#resume").on("click", function () {
        $("#include").load("resume.html");
    });
    $("#work").on("click", function () {
        $("#include").load("work.html");
    });
});

I just duplicated the same code for the footer links and attached "f" to the end of each ID for example #work is #workf for the footer.

I hope this is clear enough for anyone who is searching for the same solution.

Twitter Bootstrap add active class to li in Master page

Seems like you don't use ajax to load page when clicking to link. If It is so, the problem is that after you set 'active' class, the page reloads and it is all new. You need to decide which li will be active in your backend code or detect in javascript, what page are you currently in.

UPD:

The javascript method would look something like that

if (location.pathname.match(/connect.aspx/i)) $('a[href="Connect.aspx"]').parent().addClass('active')
if (location.pathname.match(/develop.aspx/i)) $('a[href="Develop.aspx"]').parent().addClass('active')

etc.
But this is kludge pretty much.
The better solution would be adding class="active" to needed <li> when generating page. But I don't know how your pages are generated so I cannot show example. If you use just different html files, just edit them so different <li>s have active class. If you use template engine, or something else, use its methods.

Twitter Bootstrap add active class to li

We managed to fix in the end:

/*menu handler*/
$(function(){
  function stripTrailingSlash(str) {
    if(str.substr(-1) == '/') {
      return str.substr(0, str.length - 1);
    }
    return str;
  }

  var url = window.location.pathname;  
  var activePage = stripTrailingSlash(url);

  $('.nav li a').each(function(){  
    var currentPage = stripTrailingSlash($(this).attr('href'));

    if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 
  });
});

Active class did not set to menu_item if url have '?' sign in twitter-bootstrap-rails gem

Bootstrap will only consider link as active if and only if path will match with href's value. It don't have support for query strings yet. You can use following code options to make links active/non-active with custom code:

<ul class="nav">
  <li class="<%= 'active' if controller_name == 'controller1' %>">
    <%= link_to "Link1", "/link1" %>
  </li>
  <li class="<%= 'active' if controller_name == 'controller2' %>">
    <%= link_to "Link2", "/link2" %>
  </li>
  <li class="<%= 'active' if controller_name == 'controller3' %>">
    <%= link_to "Link3", "/link3" %>
  </li>        
</ul>

Or you can use jQuery:

var url = window.location;

$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

Automatic Active Class For Twitter Bootstrap Navigation in Laravel

Take a look at the Bootstrapper package, it has lots of tools to help you with Twitter Bootstrap. In your example, you could build the navigation like this:

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
    )
));

There's also the shorthand method, less verbose, which I don't particularly like, but can be used:

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about')),
    ))
);

It's important to note that in both examples, Bootstrapper takes care of the active class automatically, comparing the current request URL against the one passed to the item. If, however, you wish to specify a different condition for this to apply, simply pass an active value, or a third value in the array, for the shorter method. Example:

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
        'active' => true,
    )
));

or

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about'), true),
    ))
);

---

Related Topics