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

Question

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

...但它没有。

这是我在 View 中使用的 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