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.

Solution

Use JavaScript.

Example with jQuery:

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

DEMO

Or with more bootstrap:

Bootstrap 3 DEMO

Comments

[megashigger]

thanks for the response. I'm a complete beginner, could you please explain where to implement this as well?

[Eric Hotinger]

Download jQuery and add it to your website using script tags. Then add a separate script which has the mentioned code.