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