Question

我在rails应用程序上做了一个红宝石，我有3个标签，按照最近和最早的投票来命令我的帖子。选项卡仅更改部分停留在同一页面而不刷新。我怎么能这样做，但有3个不同的页面？例如http://127.0.0.1:3333/performance_indicators/1?votes http://127.0.0.1:3333/performance_indicators/1?recent http://127.0.0.1:3333/performance_indicators/1?oldest

我想更改刷新页面（类似于stackOverflow的标签系统）

我的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页。

ruby on rails：不同页面的标签

1 个答案: