Question

我正在使用Rails 4和Bootstrap 3构建一个Web应用程序。

在其中一个页面中，我有以下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>

当我将这些标签中的任何一个悬停时，我发现直接网址是：http://localhost:3000/account/edit#profile，http://localhost:3000/account/edit#billing和http://localhost:3000/account/edit#expert。

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

两个注释：

我正在使用Bootstrap标签＆＃34;没有任何JavaScript＆＃34;，正如in the markdown section in the documentation所述。
我想使用Rails link_to帮助器链接到这些标签。

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

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>

将优先考虑。

如果您希望这个工作，您需要将活动类添加到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/

Bootstrap 3：如何直接链接到Rails 4

2 个答案: