如何在 Rails 6 中进行 Stateful Bootstrap 4 Tab Navigation

Posted 2023-02-15

【中文标题】如何在 Rails 6 中进行 Stateful Bootstrap 4 Tab Navigation

【英文标题】：How to do Stateful Bootstrap 4 Tab Navigation in Rails 6

【发布时间】：2020-10-17 10:34:35

【问题描述】：

目前我有一个使用 Bootstrap 4 的选项卡组件的 Rails 6 应用程序。选项卡组件运行流畅！但是，我发现刷新或向前导航然后返回将选项卡重置为默认选项卡时，这是一种糟糕的用户体验。我要说的是，将其保存在 URL 中（而不是 cookie 或本地存储）是一项要求，因为需要共享链接。查看图片 - 页面加载后，详细信息选项卡打开，然后我单击联系人选项卡，刷新然后恢复到详细信息选项卡。目标是刷新以保持联系人选项卡处于打开状态。

问题 1) 如何在 URL 中保持选项卡的状态？最佳做法、需要考虑的事项等。

问题 2) 也许我想要的方法从一开始就是错误的。有什么好的选择？

【参考方案1】：

你可以这样做：

在您看来，请执行以下操作：

<%
  tabs = %w(Details Contacts Projects Orders Batches)
  selected_tab = params[:tab] || tabs.first
%>

<ul class="nav nav-tabs">
  <% tabs.each do |tab| %>
    <%= render 'shared/tab', tab: tab, active: selected_tab == tab %>
  <% end %>
</ul>

然后是部分共享/_tab.html.erb

<li class="nav-item">
  <%= link_to title, company_path(@company, selected_tab: tab),
                     class: "nav-link# active ? ' active' : '' " %>
</li>

【讨论】：

然后刷新页面。几乎没有其他方法了吗？可以使用 javascript 来修改我想的位置历史记录并直接修改 URL 而无需刷新页面？

我尝试使用 tabs javascript 插件并使用 pushState 编辑历史记录，但无法使其可靠地工作。 Turbolinks 和以上提供了可靠和快速的体验。