ruby​​ on rails：別のページのタブ

Question

私はRubyアプリケーションでRubyをやっています。私は3つのタブを持っています。タブは、同じページ上に部分的にしか残っておらず、リフレッシュせずに変更されます。どうすればいいですか？3つの異なるページでどうすればいいですか？例えば、私が（StackOverflowののタブシステムと同様に）それをリフレッシュページを変更したいhttp://127.0.0.1:3333/performance_indicators/1?voteshttp://127.0.0.1:3333/performance_indicators/1?recenthttp://127.0.0.1:3333/performance_indicators/1?oldest

私のhtmlのタブは、このようなものです：

<div id="tabs-container" > 
     <ul class="nav nav-tabs"> 
     <li class="active test" id="recent" title="Order recommendations by Votes"><a href="#tab-1" >Votes</a></li> 
     <li class="test" id="votes" title="Order recommendations by Recent"><a href="#tab-2">Recent</a></li> 
     <li class="test" id="oldest" title="Order recommendations by Oldest"><a href="#tab-3">Oldest</a></li> 

     </ul> 
    </div> 
    <div class="tab"> 
     <div id="tab-1" class="tab-content"> 
     <p><%= render partial: 'improvement_actions/improvement_action', collection: @performance_indicator.improvement_actions.order(cached_votes_score: :desc), locals: { tab: "votes" } %></p> 
     </div> 
     <div id="tab-2" class="tab-content"> 
     <p><%= render partial: 'improvement_actions/improvement_action', collection: @performance_indicator.improvement_actions.order("created_at DESC"), :locals => { tab: "recent" } %></p> 
     </div> 
     <div id="tab-3" class="tab-content"> 
     <p><%= render partial: 'improvement_actions/improvement_action', collection: @performance_indicator.improvement_actions.order("created_at ASC") , :locals => { tab: "oldest" } %></p> 
     </div> 
    </div> 

、これが私ですjsコード：

$(document).ready(function() { 
    $(".nav-tabs a").click(function(event) { 

     event.preventDefault(); 
     $(this).parent().addClass("active"); 
     $(this).parent().siblings().removeClass("active"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 

    }); 

}); 

このパートをレンダリングする方法3つのページに分かれていますか？

Answer 1

は以下のように、選択するタブを指定するためのURLと一緒にパラメータを渡す：

<div id="tabs-container" > 
     <ul class="nav nav-tabs"> 
     <li class="<%= 'active' if params[:tab] == 'votes' %> test" id="votes" title="Order recommendations by Votes"><a href="/performance_indicators/1?tab=votes" >Votes</a></li> 
     <li class="<%= 'active' if params[:tab] == 'recent' %> test" id="recent" title="Order recommendations by Recent"><a href="/performance_indicators/1?tab=recent">Recent</a></li> 
     <li class="<%= 'active' if params[:tab] == 'oldest' %> test" id="oldest" title="Order recommendations by Oldest"><a href="/performance_indicators/1?tab=oldest">Oldest</a></li> 

     </ul> 
    </div> 
    <div class="tab"> 
    <% collection = [] %> 
    <% if params[:tab] == "votes" %> 
     <% collection = @performance_indicator.improvement_actions.order(cached_votes_score: :desc) %> 
    <% elsif params[:tab] == "recent" %> 
     <% collection = @performance_indicator.improvement_actions.order("created_at DESC") %> 
    <% elsif params[:tab] == "oldest" %> 
     <% collection = @performance_indicator.improvement_actions.order("created_at ASC") %> 
    <% end %> 
     <div class="tab-content"> 
     <p><%= render partial: 'improvement_actions/improvement_action', collection: collection, locals: { tab: params[:tab] } %></p> 
     </div> 
    </div> 

これは、あなたが望む3ページとリダイレクトリンクで動作します。