軌道上的紅寶石：不同頁面的標籤

Question

我在軌道應用程序上做了一個紅寶石，我有3個選項卡，通過投票，最近和最舊的順序排列我的帖子。選項卡僅更改部分停留在同一頁面而不刷新。我怎樣才能做到這一點，但有3個不同的頁面？例如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(); 

    }); 

}); 

我該如何渲染這部分ls在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頁的工作。