CODEWITHSUNDEEP
twitter-bootstrap
stevenmw
stevenmw

Reputation: 729

Twitter Bootstrap Menu Active State How To

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>

Upvotes: 2

Views: 2881

Answers (1)

Matt K
Matt K

Reputation: 7327

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/

Upvotes: 2

Related Questions