자바 스크립트로 클릭시 클래스 추가 및 제거

Question

내 레일 앱에서 사용자가 메뉴의 링크를 클릭하면 링크에 밑줄이 그어 현재 페이지임을 나타 내기 위해 노력하고 있습니다. 기본 자바 스크립트와 CSS로 설정했지만 addClass() 및 removeClass() 기능을 작동시키는 데 문제가 있습니다.

지금은 active 링크에 밑줄을 긋지 만 다른 링크를 클릭하면 활성 클래스가 전송되지 않습니다 (링크가 깜박 거리는 것처럼 보이지만). 어떤 도움을 많이 주시면 감사하겠습니다!

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

은 당

//= 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

작품을 application.js 여기 fectly :

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