2

I've been playing with the Twitter Bootstrap for the first time. Found over at http://twitter.github.io/bootstrap/index.html

It has a lot of great information, but I can't find anywhere where it tells how to do an active state for a menu. It has plenty of menu examples but no jquery example on how to add an active state to a menu item. How can this be done using built in twitter bootstrap features and jquery? Surely it is possible. I just want to assign the active class to the selected li element. I seriously can't find any information that goes over this simple request. Anyone know how to do this?

The menus are all like <ul><li></li><li></li></ul> with a different class assigned to the ul. They each have a .active class but no where does it tell any jquery to add an active state to these menus. Anyone know how in regards specifically to the bootstrap?

I tried the jquery at the link mentioned below but I can't seem to get it too work. My menu looks like

<ul class="nav nav-pills">
    <li><a href="one.php">one</a></li>
    <li><a href="two.php">two</a></li>
    <li><a href="three.php">three</a></li>
    <li><a href="four.php">four</a></li>
</ul>
stevenmw
  • 689
  • 2
  • 8
  • 15
  • Check this out: http://stackoverflow.com/questions/9301507/bootstrap-twitter-css-active-navigation –  Jun 17 '13 at 18:24
  • Why won't the `.active` class work for you? – philipcdavis Jun 17 '13 at 18:35
  • I could but that would permanently place the active class to the assigned element. I want to add an active state based on the linked clicked.... You click a link, go to a page, that link holds an active state based on a class.. – stevenmw Jun 17 '13 at 18:38
  • I'm assuming you have a 100% static site. One thing you may want to try is using Jekyll (or similar) to generate your site so you don't need to rewrite your navbar on every page. You can also configure it to add the `active` class to the `about` link when in `about.html` so you don't need to rely on Javascript. – Zach Latta Jun 17 '13 at 18:41

1 Answers1

2

Use jQuery to add the active class:

$(".nav.nav-pills li:first").addClass("active");

You could also select other list items using the eq(n) selector:

$(".nav.nav-pills li:eq(2)").addClass("active"); // selects the 2nd element

Or:

var liToSelect = 3;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");

http://jsfiddle.net/Y36FV/

Matt K
  • 7,207
  • 5
  • 39
  • 60
  • If i wanted to change li:first so it works with my nav nav-pills class what would I change it to? – stevenmw Jun 17 '13 at 18:43
  • I'm not sure what you're asking..? What do you mean by "works"? It technically already works. – Matt K Jun 17 '13 at 18:46
  • You have is adding the active class to the first li by using li:first The twitter bootstrap class is nav nav-pills If I want to use nav navpills instead of li:first so that the addclass works with my menu above what would I put – stevenmw Jun 17 '13 at 18:50
  • Oh, if you mean to only select the nav-pills, and not apply `active` to other list items, use this: `$(".nav-pills li:first").addClass("active");` – Matt K Jun 17 '13 at 18:50