单击 Javascript 添加和删除 类

Question

所以在我的 rails 应用程序中，我试图让它在用户单击菜单中的 link 时，link 变成下划线以表明它是当前页面。我已经使用 javascript 和 css 进行了基本设置，但是我无法让 addClass() 和 removeClass() 函数正常工作。

现在，active link 下划线很好，但是当单击另一个 link 时，活动的 class 不会转移（尽管 link 似乎在闪烁）。任何帮助将不胜感激！

菜单 HTML

<div id="collective_tabs">
  <ul>
    <li>
      <%= link_to 'Projects', collective_projects_path(@collective) %>
    </li>
    <li>
      <%= link_to 'Members', collective_members_path(@collective) class: 'active' %>
    </li>
  <ul>
</div>

CSS

.active {
  border-bottom: 1px solid;
}

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen-jquery
//= require messages
//= require bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
    $('#collective_tabs li a').on('click', function(){
        $('li a.active').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 1

在这里完美运行：

http://jsfiddle.net/kez5zwgq/

确保在 HTML 中定义了 "a" 标签 ;)

HTML

<div id="collective_tabs">
 <ul>
   <li>
    <a>potato</a>
   </li>
   <li>
    <a class="active">tomato</a>
   </li>
 <ul>
</div>

您可能需要考虑使用以下 CSS：

CSS

.active {
   text-decoration: underline;
}