使用Java单击添加和删除类

Question

So in my rails app, I am trying to have it so that when when a user clicks a link in a menu, that link becomes underlined to indicate it is the current page. I have the basic set up down with javascript and css but I am having trouble getting the addClass() and removeClass() functions working.

Right now, the active link underlines fine, however when the other link is clicked, the active class doesn't transfer (although the link seems to flicker). Any help would be much appreciated!

The Menu 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

Works perfectly here:

http://jsfiddle.net/kez5zwgq/

Make sure you have your "a" tags defined in your HTML ;)

HTML

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

You might want to consider using the following CSS:

CSS

.active {
   text-decoration: underline;
}