클래스를 링크로 변경하고 하나만 활성 또는 비활성으로 설정할 수 있습니다.

Question

레일 3 애플리케이션에서 나는 <ul>에 세 개의 링크가 포함되어 있는데 클릭하면 해당 부분이 <div> 아래로로드됩니다. 일부 JavaScript/jQuery를 사용하여 부분로드 여부를 확인하고 싶습니다. 그렇게하면 스타일을 지정하기 위해 <a href> 클래스를 active 또는 inactive으로 변경할 수 있습니다.

<div id="tabs"> 
    <ul id="infoContainer"> 
    <li><%= link_to "Reviews", profile_reviews_profile_path, :class => 'active', :remote => true %></li> 
    <li><%= link_to "About", profile_about_profile_path, :class => 'inactive', :remote => true %></li> 
    <li><%= link_to "Credits", profile_credits_profile_path, :class => 'inactive', :remote => true %></li> 
    </ul> 
    <div id="tabs-1"> 
    <%= render :partial 'profile_reviews %> #default 
    </div> 
</div><!-- end tabs --> 

모든 도움을 주시면 감사하겠습니다.

업데이트 나는이 코드를 사용했으나 첫 번째 링크를 클릭하면 더 이상 신발을 비활성 상태에서 활성 상태로 전환 할 수 없습니다. 다른 두 작품은 훌륭합니다.

$(function(){ 
    $("a.inactive").click(function() { 
     $(".active").not(this).toggleClass("inactive active"); 
     $(this).toggleClass("inactive active"); 
    }); 
}); 

Answer 1

JS에 추가 클릭 이벤트를 설정할 수 있습니다. 이 때이 페이지가로드를 실행해야합니다 :

이

$(document).ready(function() { 

    $("#tabs > ul a").click(function(){ 
    $this = $(this) 
    $this.siblings(".active").toggleClass("active") 
    $this.addClass("active" 
    }) 

}); 

이것은 또한 앱에서 동일한 구조와 다른 #tabs을 위해 작동합니다. 메모리에서 어떤 식 으로든 이것이 :remote => true 기능에 영향을 미치지 않는다고 생각합니다.

Answer 2

나는 another question에 답을 goot :

$(function(){ 
    var sidebar=$('#sidebar'); 
    sidebar.delegate('a', 'click',function(){ 
     sidebar.find('.active').toggleClass('active inactive'); 
     $(this).addClass('active').removeClass('inactive'); 
    }); 
});