web-dev-qa-db-ja.com

Twitter Bootstrapタブに表示されるイベントがページの読み込み時に発生しない

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>

どんな手掛かり？

javascripteventstabstwitter-bootstrapcoffeescript
14
sixpounder

クラスactiveをタブ_<li>_とコンテンツ_<div>_の両方から外してみてください。最初の show()メソッドのコード行 の1つは、要求されているタブがすでにアクティブである場合に短絡することです。

JSFiddle

28
merv

ページにタブを表示するように指示すると、イベントを手動でトリガーできます。

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

Bootstrap Javascriptの切り替え可能なタブとクラスとIDによって管理される基本的なタブを混在させていると思います

Javascriptを使用してタブを管理する場合は、次に示すように、LI要素のアンカーからdata-toggle = "tab"を削除する必要があります。 http://getbootstrap.com/2.3.2/javascript .html＃tabs

構文を基本タブと比較できます： http://getbootstrap.com/2.3.2/components.html#navs

0
4lberto