Các nút hoạt động với Bootstrap 3

Question

Trong thanh điều hướng, tôi muốn các nút của mình trở nên hoạt động (được tô bóng) khi tôi nhấp vào chúng. Ngay bây giờ, tôi chỉ có thể vĩnh viễn làm cho họ hoạt động hoặc không hoạt động nhưng không biết làm thế nào để có nó thay đổi khi tôi nhấp vào chúng. Tôi đang sử dụng Bootstrap mới (3.0).

Ví dụ:

Non-Active

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

tích cực

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

Tôi muốn nó được hoạt động/không hoạt động tùy thuộc vào việc trang hiện tại được chọn hay không.

Answer 1

Sử dụng JavaScript.

Ví dụ với jQuery:

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

DEMO

Hoặc với bootstrap hơn:

Bootstrap 3 DEMO

Answer 2

Bạn đã loooked tại ngọc đơn giản chuyển hướng?

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

Nó đã chức năng này được xây dựng trong.

Answer 3

nếu bạn đang sử dụng bootstrap bạn có thể ghi dữ liệu-Toggle = "thả xuống" ví dụ Home