60

プロジェクトにTwitterブートストラップを使用しています-特にそのタブ機能（http://twitter.github.com/bootstrap/javascript.html#tabs）

これでこのタブリストができました。タブを押すと、個々のタブのコンテンツに切り替わります。ただし、このコンテンツはページにプリロードされています（すべてのタブのコンテンツのhtmlコードはすでに存在します。タブを押すことによってのみ、表示を変更できます）。

ただし、特定のタブが押されたときにのみコンテンツを動的にロードしたいので、ページ全体がロードされたときのデータではなく、最新のデータを取得します。

これにはjQueryを使用する予定です。しかし、タブが押されたときに特定のjquery関数が呼び出されるようにするにはどうすればよいですか？

タブがクリックされたときにアラートを表示しようとしましたが（それが機能する場合は、jQuery関数も機能します）、それでも機能しません。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

そして私のhtml：

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

これを機能させる方法について何かアイデアはありますか？

Twitterのブートストラップタブの動作については、これを参照してください：（http://twitter.github.com/bootstrap/javascript.html#tabs）およびそれが使用するjsファイル： http：//twitter.github.com/bootstrap/1.4。 0 / bootstrap-tabs.js

4

7 に答える 7

73

Twitter Bootstrap バージョン 2 では、タブ変更イベントをサブスクライブする文書化された方法は次のとおりです。

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Twitter の Bootstrap タブ イベントに関する最新のドキュメントは、 http: //getbootstrap.com/javascript/#tabsにあります。

于 2012-09-05T17:57:58.923 に答える
14

バインドは、DOM の準備が整う前に実行されるようです。さらに、セレクターが壊れているようで、選択した要素にのみ変更をバインドできます。いくつかのロジックをクリックして実装することで回避する必要があります。試す

$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});

アップデート

ドキュメントを参照したところ、コードに DOM 対応の部分だけが欠けていたようで、残りは実際にはバグではありませんでした。つまり、ドキュメントによると、次のように動作するはずです。

$(function() {
    $('.tabs').bind('change', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it's needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});

混乱の原因は、プラグインがデフォルトのセレクターをオーバーライドして#.tabs有効にし、タブ要素に変更イベントを追加することです。この構文が素晴らしいアイデアであると彼らが判断した理由を理解してください。

とにかく、2 番目のサンプルを試して、タブの変更の前または後にアラートが発生するかどうかをコメントしてください。

#.tabs編集:セレクターによって引き起こされる jquery 例外を修正

于 2011-11-15T13:36:12.437 に答える
4

ブートストラップ 3 では、次のコード スニペットを使用できます。

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})
于 2015-04-07T16:25:10.113 に答える
0

ドキュメントによると：イベントを使用しますshow。

于 2012-02-16T23:50:40.073 に答える
0

クリックの使い方は？このような：

$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})
于 2011-11-15T13:26:27.347 に答える
0

セレクターに関連する構文にエラーがあります。

$('#.tabs') // should be ...
$('.tabs');

順序付けられていないリストには、 HTML で「tabs」と呼ばれるクラスがありますが、最初はID「.tabs」の要素を選択しようとしていました。

また、マンティコアの提案も考慮に入れる必要があります。'change' はフォーム要素でのみ使用できます。

$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});
于 2011-11-15T13:33:56.727 に答える