Active Buttons with Bootstrap 3

Question

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.

Answer 1

Use JavaScript.

Example with jQuery:

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

DEMO

Or with more bootstrap:

Bootstrap 3 DEMO