0

私のjsの知識は非常に限られています。私はすでに公式ドキュメントとウェブ上のいくつかのスレッドを読みました。それでも私にはいくつかの問題があります。タブが表示されているときにいくつかの操作を行う必要があるため、プログラムでタブを表示する必要があります。

Twitterのブートストラップのドキュメントによると、ここに小さなコードがあります:

    <ul id="tabs" class="nav nav-tabs">
        <li><a href="#state">State</a></li>
        <li><a href="#graph">Graph</a></li>
        <li><a href="#setup">Setup</a></li>
    </ul>
    <div class="tab-content">
        <div id="state" class="tab-pane fade">
        </div>
        <div id="graph" class="tab-pane fade">
        </div>  
        <div id="setup" class="tab-pane fade">
        </div>
    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$('#tabs a').click(function (e) {
  e.preventDefault();
  console.log("Activating a tab");
  $(this).tab('show');
})

$('a[data-toggle="tab"]').on('shown', function (e) {
    console.log("Tab activated");
    e.target // activated tab
    e.relatedTarget // previous tab
})
</script>

最初のスクリプトは各タブをアクティブにします - そしてそれは機能しています。2 つ目は「shown」イベントをサブスクライブする必要があり、e.target にはアクティブ化されたタブの参照が含まれている必要があります。

最初のコンソール メッセージ (「タブをアクティブにしています」) が表示されますが、2 番目のメッセージは表示されません。したがって、イベントに正しくサブスクライブするには、何かが欠けているに違いありません。

理解できない2つの問題。機能させるために、jsを使用してタブをアクティブにすることはできませんが、ブートストラップのデータ切り替え項目に依存するだけです。もう 1 つの奇妙な点は、'show' イベントのみが発生し、'shown' イベントは発生しないことです。なぜなのかご存知ですか？

4

1 に答える 1

1

リンクに追加する必要がありdata-toggle="tab"ます。したがって、最初の部分は次のように書き直す必要があります

<ul id="tabs" class="nav nav-tabs">
    <li><a data-toggle="tab" href="#state">State</a></li>
    <li><a data-toggle="tab" href="#graph">Graph</a></li>
    <li><a data-toggle="tab" href="#setup">Setup</a></li>
</ul>

Tab activatedその後、コンソールにメッセージが表示されるはずです。

于 2013-01-08T21:54:24.643 に答える