Question

以下是我使用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>

===更新===

我刚接触JS和Web开发。我正在尝试关注Twitter Bootstrap教程的代码在这里：http://jsfiddle.net/Dy9e6/

我只想让用户点击其中一个药片/标签后点击的nag-pill显示为“已选中”或“突出显示”。

Answer 1

首先，您需要将默认class="active"添加到第一个元素其次，您需要将data-toggle="tab"添加到<a />元素。请参阅docs

您的代码变为：

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

Demo

如何使用bootstrap让点击的nav-pill保持活动状态？

1 个答案: