html - Bootstrap 3 によるアクティブボタン

Question

ナビゲーションバーで、ボタンをクリックするとアクティブ (影付き) になるようにします。現在、それらを永続的にアクティブまたは非アクティブにすることしかできませんが、クリックすると変更する方法がわかりません。新しい Bootstrap (3.0) を使用しています。

例えば：

非アクティブ

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

アクティブ

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

現在のページが選択されているかどうかに応じて、アクティブ/非アクティブにしたい。

score 9 · Accepted Answer

JavaScript を使用します。

jQuery の例:

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

または、より多くのブートストラップを使用して:

score 0 · Accepted Answer

simple-navigation gem を見たことがありますか?

この機能が組み込まれています。

html - Bootstrap 3 によるアクティブ ボタン