Html 带引导3的活动按钮

在导航栏中，我希望我的按钮在单击时变为活动（着色）。现在，我只能永久地使它们处于活动或非活动状态，但不知道如何在单击它们后进行更改。我正在使用新的引导（3.0）

例如：

非活动的

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

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

活动的

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

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

我希望它是活动的/非活动的，这取决于当前页面是否被选中。

使用JavaScript

jQuery的示例：

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

或者使用更多引导：

---

你看过简单导航宝石吗

---

它内置了此功能

如果您正在使用引导，您可以编写数据toggle=“dropdown”，例如

---

主页

感谢您的回复。我是一个完全的初学者，你能解释一下在哪里实现这个吗？下载并使用脚本标签将它添加到你的网站上。然后添加一个包含上述代码的单独脚本。