Twitter的引导选项卡中显示事件不触发页面加载(Twitter Bootstrap tab sh

在一个页面，在这里我有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> 一个第一的在代码行show()方法是短路如果所请求的选项卡已经处于活动状态。

的jsfiddle

Answer 2:

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

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

Answer 3:

我认为你是混合引导的Javascript Toggable标签，并按类和ID的管理基本标签

如果你想使用Javascript功能来管理标签，你应该删除该数据切换=“标签”从上栗元素锚，如下所示： http://getbootstrap.com/2.3.2/javascript.html#tabs

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

文章来源: Twitter Bootstrap tab shown event not firing on page load