Twitter Bootstrap 选项卡显示事件未在页面加载时触发

Posted 2023-02-22

【中文标题】Twitter Bootstrap 选项卡显示事件未在页面加载时触发

【英文标题】：Twitter Bootstrap tab shown event not firing on page load

【发布时间】：2012-07-30 01:56:43

【问题描述】：

在我有 n 个选项卡的页面中，以及以下脚本（coffeescript，我检查了编译后的 javascript，似乎没问题）...

$ ->
    init()

init = ->
    $('a[data-toggle="tab"]').on 'shown', (event) ->
        shown = event.target
        console.log("Showing tab: " + shown)

现在，'shown' 事件不会在页面加载时触发，因此对于页面上显示的第一个选项卡，无法处理此问题（即：通过 xhr 加载内容）

我尝试将其添加到上述脚本中，看看是否可以手动触发它：

$('a[data-toggle="tab"]:first').tab 'show'

...但它没有。

这是我在视图中使用的 html 代码

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#updates" data-toggle="tab"><%=t :updates, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#activity" data-toggle="tab"><%=t :activity, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#articles" data-toggle="tab"><%=t :articles, :scope => 'user.profile.sections'%></a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="updates">

    </div>
    <div class="tab-pane" id="activity">

    </div>

    <div class="tab-pane" id="articles">

    </div>

</div>
</div>

有什么线索吗？

【参考方案1】：

尝试将课程active 关闭选项卡<li> 和内容<div>。第一个lines of code in the show() method 之一是在请求的选项卡已处于活动状态时短路。

JSFiddle

【讨论】：

给出答案，这就是解决方案

这似乎不再起作用了。离开活动课程使我的选项卡看起来没有被选中。只需在 JS 中触发事件确实有效。

正如 Bpainter 所说，这似乎不再起作用了。离开class='active' 只会让标签看起来未被选中。在 Diego 的代码中使用 onload 事件似乎是目前唯一的解决方案。

【参考方案2】：

您可以在告诉页面显示标签时手动触发事件：

$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");

【讨论】：

$('a[data-toggle="tab"]:first').tab('show') 可能是一个更好的主意。

【参考方案3】：

我认为您正在混合 Bootstrap Javascript Toggable 选项卡和由类和 id 管理的基本选项卡

如果您想使用 Javascript 来管理选项卡，您应该从 LI 元素的锚点中删除 data-toggle="tab"，如下所示：http://getbootstrap.com/2.3.2/javascript.html#tabs

您可以将语法与基本选项卡进行比较：http://getbootstrap.com/2.3.2/components.html#navs

【参考方案4】：

在我之后

$("#modal").modal('show');

我添加了这个，它工作得很好：

$('a[data-toggle="tab"]:first').click();