Twitter Bootstrap菜单活动状态如何

时间:2013-06-17 18:20:38

标签: twitter-bootstrap

我第一次玩Twitter Bootstrap。找到http://twitter.github.io/bootstrap/index.html

它有很多很棒的信息,但我找不到它告诉如何为菜单执行活动状态的任何地方。它有很多菜单示例,但没有关于如何将活动状态添加到菜单项的jquery示例。如何使用内置的twitter引导功能和jquery来完成?当然有可能。我只想将活动类分配给选定的li元素。我真的找不到任何有关这个简单请求的信息。有谁知道怎么做?

菜单都像<ul><li></li><li></li></ul>,并且为ul分配了不同的类。它们每个都有一个.active类,但没有告诉任何jquery在这些菜单中添加活动状态的地方。任何人都知道如何专门针对引导程序?

我在下面提到的链接上尝试了jquery,但我似乎无法将其工作。我的菜单看起来像

<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>

1 个答案:

答案 0 :(得分:2)

使用jQuery添加active类:

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

您还可以使用eq(n)选择器选择其他列表项:

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

或者:

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

http://jsfiddle.net/Y36FV/