Bootstrap 3 的活动按钮答案

【问题标题】：Active Buttons with Bootstrap 3Bootstrap 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');
  });

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

【讨论】：

【解决方案2】：

您看过简单导航 gem 吗？

它内置了这个功能。

【讨论】：

【解决方案3】：

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

【讨论】：