Bootstrap 3 的活动按钮

Posted 2023-03-06

【中文标题】Bootstrap 3 的活动按钮

【英文标题】：Active Buttons with Bootstrap 3

【发布时间】：2013-08-25 19:44:55

【问题描述】：

在我的导航栏中，我希望我的按钮在单击时变为活动状态（阴影）。现在，我只能永久地使它们处于活动状态或非活动状态，但不知道如何在单击它们后进行更改。我正在使用新的 Bootstrap (3.0)。

例如：

非活动

<li><%= link_to "Contact", contact_path %></li>

活跃

 <li class="active"><%= link_to "About", about_path %></li>

我希望它根据当前页面是否被选中而处于活动/非活动状态。

【参考方案1】：

使用 javascript。

jQuery 示例：

$('ul li').click( function() 
    $(this).addClass('active').siblings().removeClass('active');
  );

DEMO

或者使用更多的引导程序：

Bootstrap 3 DEMO

【讨论】：

感谢您的回复。我是一个完整的初学者，你能解释一下在哪里实现这个吗？

下载 jQuery 并使用脚本标签将其添加到您的网站。然后添加一个包含上述代码的单独脚本。

【参考方案2】：

您看过简单导航 gem 吗？

https://github.com/andi/simple-navigation

它内置了这个功能。

【参考方案3】：

如果您使用引导程序，您可以编写 data-toggle="dropdown" 例如 主页