14

在我有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>

有什么线索吗？

4

4 回答 4

28

尝试让课程active离开选项卡<li>和内容<div>。如果所请求的选项卡已经处于活动状态，则该方法中的第一行代码之一show()是短路。

JSFiddle

于 2012-08-01T15:47:43.310 回答
13

当您告诉页面显示选项卡时，您可以手动触发事件：

$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
于 2013-10-31T21:23:18.367 回答
0

我认为您正在混合 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

于 2013-08-21T16:56:23.790 回答
0

在我之后

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

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

$('a[data-toggle="tab"]:first').click();
于 2020-12-22T18:19:02.033 回答