使用Javascript在单击时添加和删除类

因此，在我的rails应用程序中，我尝试使用它，以便当用户单击菜单中的链接时，该链接将带下划线，以指示它是当前页面。我已经用javascript和css进行了基本设置，但是我很难让

addClass（）

和

removeClass（）函数正常工作

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

菜单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>

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');
    });
});

在这里非常有效：


确保在HTML中定义了“a”标记；）

HTML

嗯，让我觉得这个问题是涡轮链接集成的问题。我假设没有办法用jsfiddle测试它？首先检查“turbolinks”是否生成正确的HTML输出。如果你是对的，一切都好。我无法让它工作的原因是我的链接没有使用ajax，因此单击一个链接可以刷新菜单。因此，“成员”始终处于活动状态，这是默认的原因。掌心。
//= 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');
    });
});

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

.active {
   text-decoration: underline;
}