ruby on rails:用于不同页面的选项卡

ruby on rails: tabs for different pages

本文关键字：选项 on rails 用于 ruby      更新时间：2023-09-26

我正在做一个ruby on rails应用程序，我有三个选项卡，可以按投票顺序排列我的帖子，最近的和最旧的。标签页只更改部分内容，不刷新。如果没有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个不同的页面中呈现此部分？

在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页。

相关文章：