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'

......但它沒有。

這是我在視圖中使用的 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

嘗試在選項卡<li>和內容<div>都保持該類active狀態。 show()方法中的第一行代碼之一是在請求的選項卡已經處於活動狀態時進行短路。

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();