Bootstrap3：如何link直接从另一个页面跳转到一个tabRails4

Question

我正在使用 Rails 4 和 Bootstrap 3 构建网络应用程序。

在其中一个页面中，我有以下 Bootstrap tabs：

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</a></li>
    <li role="presentation"><a href="#billing" aria-controls="billing" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Billing</a></li>
    <li role="presentation"><a href="#expert" aria-controls="expert" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Expert</a></li>
  </ul>

然后，这些选项卡中的以下内容：

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="profile">
    </div>
    <div role="tabpanel" class="tab-pane" id="billing">
    </div>
    <div role="tabpanel" class="tab-pane" id="expert">
    </div>
</div>

当我将鼠标悬停在这些选项卡中的任何一个时，我看到直接 URL 是，即：http://localhost:3000/account/edit#profile、http://localhost:3000/account/edit#billing 和 http://localhost:3000/account/edit#expert。

但是，当我尝试从另一个页面直接 link 到选项卡时，活动选项卡仍然是第一个（不是我 link 进入的那个）。

两个注意事项：

我正在使用 Bootstrap 选项卡 "without any JavaScript"，如 in the markdown section in the documentation 所述。
我想使用 Rails link_to 助手 link 这些选项卡。

知道为什么这不起作用吗？

Answer 1

您正在设置视图中的活动选项卡

<li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</a></li>

哪个优先。

如果你想让它起作用，你需要将活动 class 添加到 url 锚点（#expert，在你的情况下）中引用的任何选项卡

见this post if you need code reference.

***编辑：由于您没有使用 js，请使用底部的答案，通过解析请求动态确定活动选项卡

Answer 2

我认为如果不添加一些 javascript 内容，您将无法完成您的目标，因为选项卡用于页内导航，而不是页间导航。此外，这些选项卡上什至不需要 href 标记，因为 data-toggle 属性控制显示哪个选项卡窗格。

如果添加一个小的 javascript 片段是一个可行的选项，这将在页面导航到时切换到适当的选项卡。

hash = window.location.hash
$("a[href=#{hash}]").click()

https://jsfiddle.net/tL7sutnt/

Bootstrap3：如何link直接从另一个页面跳转到一个tabRails4

Bootstrap 3: how to link directly to a tab from another page in Rails 4

tabs

ruby-on-rails

hyperlink

twitter-bootstrap

ruby-on-rails-4