如何在点击或提交表单上更改网址

Question

我正在使用带有长表单的 twitter bootstrap 3，该表单分为五个选项卡，如果 tab one 处于活动状态，则表示 url 为 domain.com/profiles/1/edit?tab=one，我点击 tab two 或者说如果我点击 @ 的提交按钮987654324@ 比我想将 url 修改为domain.com/profiles/1/edit?tab=two。我不知道，是否可以完成...可能可以通过javascript完成，但我不知道如何。

感谢您的宝贵时间。

# Tabs nav
<ul class="nav nav-tabs" id="myTab">
  <li class="<%= 'active' if params[:tab] == 'one' %>">
    <a href="#one"  data-toggle="tab">Tab one</a>
  </li>
  <li class="<%= 'active' if params[:tab] == 'two' %>">
    <a href="#two"  data-toggle="tab">Tab two</a>
  </li>
  <li class="<%= 'active' if params[:tab] == 'three' %>">
    <a href="#three" data-toggle="tab">Tab three</a>
  </li>
  <li class="<%= 'active' if params[:tab] == 'four' %>">
    <a href="#four" data-toggle="tab">Tab four</a>
  </li>
  <li class="<%= 'active' if params[:tab] == 'five' %>">
    <a href="#five"  data-toggle="tab">Tab five</a>
  </li>
</ul>

# Tabs content
<div class="tab-content">
  <div class="<%= if (params[:tab] == 'one' || !params[:tab])then 'tab-pane active'  else 'tab-pane' end %>" id="one">
    <%= form_for @profile do |f| %>
      <%= f.label :fname, "First name" %>
      <%= f.text_field :fname, :class => "form-control required"  %>
      <%= f.submit "Save", :class => "btn btn-primary"  %>
    <% end %>
  </div> <!-- tab one ends -->

  <div class="<%= if params[:tab] == 'two' then 'tab-pane active'  else 'tab-pane' end %>" id="two">
    <%= form_for @profile do |f| %>
      <%= f.label :lname, "Last name" %>
      <%= f.text_field :lname, :class => "form-control required"  %>
      <%= f.submit "Save", :class => "btn btn-primary"  %>
    <% end %>
  </div> <!-- tab two ends -->
  # same goes on
  <!-- tab three ends -->
  <!-- tab four ends -->
  <!-- tab five ends -->
</div>

我的主要动机是，当我提交tab one 的表单时，保存页面后它应该显示tab one active。 当我提交tab two的表单时，保存页面后它应该显示tab two active

Answer 1

所以要指定从控制器返回到页面上的某个部分，您可以使用“anchor”（指定要返回的 div id），或者您可以自己创建 url。我通常会为每个选项卡指定一个 id（这样我的 url 看起来更像“/edit#tab_one”，然后在我的控制器操作中，做

redirect_to :edit, :anchor => "tab_one"

但由于您正在做更多的 url 查询类型，您可以像这样制作 url 路径：

url = edit_profile_path(@profile)
new_url = url + "?tab=one"
redirect_to new_url

真正最棘手的部分是知道哪个选项卡处于活动状态。因此，您可以在每个选项卡的表单中传递一个隐藏参数：

f.hidden_field :tab, :value => "one"  # and 'two' in the second tab, etc.

然后在你的控制器中这样做：

tab = params[:tab]
url = edit_profile_path(@profile)
new_url = url + "?tab=" + tab
redirect_to new_url