twitter-bootstrap 如何使用引导程序让点击的导航药丸保持活动状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21663608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to I let the clicked nav-pill stays active using bootstrap?
提问by Kann
Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
下面是我如何使用 Bootstrap 3.1.0 创建我网站的菜单链接。我希望在单击链接时所选的 nag-pill 保持活动/选择。目前，点击链接后定义的悬停颜色消失了。有没有办法让药丸在点击后保持活跃？
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li><a href="#/knowing_us" id="menu_text">one</a></li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
===更新===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
我只是 JS 和 Web 开发的新手。我试图遵循 Twitter Bootstrap 教程的代码在这里：http: //jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
我只希望在用户单击药丸/选项卡之一后，单击的 nag-pill 显示为“已选择”或“突出显示”。
回答by Rahil Wazir
First you need to add default class="active"to the first element.
Second you need to add data-toggle="tab"to the <a />element. See the docs
首先，您需要将默认值添加class="active"到第一个元素。
其次，您需要添加data-toggle="tab"到<a />元素中。查看文档
Your code becomes:
您的代码变为：
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active"><a href="#knowing_us" data-toggle="tab" id="menu_text">one</a></li>
<li><a href="#knowing_us2" data-toggle="tab" id="menu_text">two</a></li>
<li><a href="#knowing_us3" data-toggle="tab" id="menu_text">three</a></li>
</ul>
