Active buttons with bootstrap 3

Question

In my navigator, I want my buttons to become active (shaded) when I click on them. Right now, I can only make them active or inactive for a long time, but I don’t know how to change it as soon as I click on them. I am using the new Bootstrap (3.0).

For instance:

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 / inactive depending on whether the current page is selected or not.

Answer 1

Use javascript.

JQuery example:

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

Demo

Or with a larger load:

Bootstrap 3 DEMO

Answer 2

Have you tried yourself on a simple navigation stone?

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

It has built-in functionality.

Answer 3

if you use bootstrap, you can write data-toggle = "dropdown", for example Home