Question

在我有 n 标签的页面中，以及以下脚本（coffeescript，我检查了已编译的javascript，似乎没问题）......

$ ->
    init()

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

有任何线索吗？

Answer 1

尝试从active标签和内容<li>上退出课程<div>。如果请求的标签已经激活，则第一个lines of code in the show() method之一就是短路。

JSFiddle

Answer 2

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

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

Answer 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

Answer 4

在我之后

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

我添加了这个，效果很好：

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

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

4 个答案:

JSFiddle