如何使用引导程序让单击的导航药丸保持活动状态？

Posted 2023-04-12

【中文标题】如何使用引导程序让单击的导航药丸保持活动状态？

【英文标题】：How to I let the clicked nav-pill stays active using bootstrap?

【发布时间】：2014-03-06 23:33:29

【问题描述】：

以下是我如何使用 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 显示为“已选择”或“突出显示”。

【问题讨论】：

你的问题我不清楚。也许在 jsfiddle.net 上创建一个演示来显示问题。

isherwood，感谢您向我介绍 jsfiddle.net。我刚刚发布了我在帖子中添加的链接中的代码。

【参考方案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 4 进行复制。