带有Bootstrap 3的活动按钮

Question

在我的导航栏中，当我点击它们时，我希望我的按钮变为活动状态（阴影）。现在，我只能永久地让它们处于活动状态或非活动状态，但是一旦点击它们就不知道如何改变它们。我正在使用新的Bootstrap（3.0）。

例如：

非有效

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

有效

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

我希望它处于活动/非活动状态，具体取决于当前页面是否被选中。

Answer 1

使用JavaScript。

jQuery示例：

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

<强> DEMO

或者使用更多引导程序：

<强> Bootstrap 3 DEMO

Answer 2

你看过简单的导航宝石吗？

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

内置了此功能。

Answer 3

如果你使用bootstrap，你可以编写data-toggle =＆＃34; dropdown＆＃34;例如 家