Twitter Bootstrap. Active menu item marking

Question

I use standart twitter bootstrap menu:

<ul class="nav nav-pills">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

How to mark active menu item?

Solution 1

You just have to add "active" in your li like :

<li class="active">
    <a href="#"></a> 
</li>

Solution 2

Add a class of the active to the li

http://twitter.github.com/bootstrap/components.html#navbar

Comments

[Wolter]

It's mark only one marked <li>, not current. It's static, not active.

[Wolter]

It's mark only one marked <li>, not current. It's static, not active.

[Chris]

Just add some javascript to make it active

[ashley]

then add a class to it anyway: .marked { background: red; } then put <li class="marked"></li> or in css declare: .nav li:first-child { background: red; }

[Wolter]

You mean something from standart Bootstrap js tools?

[Chris]

Not necessarily, you can just add an id or whatever to identify each li and change their class to "active" when this page is loaded

[Chris]

document.getElementById("idOfCurrentli").setAttribute("class‌​", "active");

[Wolter]

And how to define idOfCurrentli :) ?

[Chris]

In your html : <li id="homePage"><a href="#">...</a></li> And then in the js of this page : document.getElementById("homePage").setAttribute("class", "active");