Active Buttons with Bootstrap 3

问题

In my navbar, I want my buttons to become active (shaded) when I click on them. Right now, I can only permanently make them active or non-active but don't know how to have it change once I click on them. I'm using the new Bootstrap (3.0).

For example:

Non-Active

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

Active

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

I want it to be active/non-active depending on whether the current page is selected or not.

回答1:

Use JavaScript.

Example with jQuery:

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

DEMO

Or with more bootstrap:

Bootstrap 3 DEMO

回答2:

Have you loooked at the simple-navigation gem?

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

It has this functionality built in.

回答3:

if you are using bootstrap you can write data-toggle="dropdown" for example Home

来源：https://stackoverflow.com/questions/18391272/active-buttons-with-bootstrap-3