Ruby on Rails: Tabs für verschiedene Seiten

Question

Ich mache eine Ruby on Rails App und ich habe 3 Tabs, die meine Beiträge nach Votes sortieren, zuletzt und älteste. Die Registerkarten ändern nur ein Teil, das auf derselben Seite bleibt, ohne zu aktualisieren. Wie kann ich das aber mit 3 verschiedenen Seiten machen? zum Beispiel 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

Ich möchte die Seite zu aktualisieren es (ähnlich der Registerkarte System von Stackoverflow) wie diese

meine HTML-Tabs sind ändern:

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

und das ist mein js code:

$(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(); 

    }); 

}); 

Wie kann ich diese partiia machen ls in 3 verschiedenen Seiten?

Answer 1

Parameter übergeben zusammen mit der URL, die Registerkarte angeben, wie zu wählen:

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

Dies wird als 3 Seiten, die Sie wollen mit Redirect Links funktionieren.