3

したがって、jQuery UIのように、ブートストラップにはタブのコンテンツと呼ばれるajaxのデフォルトのサポートがないことを理解しています。

私はここで他の質問の助けを借りて管理し、次の解決策を考え出しました、その種の作品：

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
        <li><a data-toggle="tab" class="ajax" href="test.html">tab 4 - ajax</a></li>
      </ul>
      <div class="tab-content">
        <div id="tab1" class="tab-pane active"> tab 1 content </div>
        <div id="tab2" class="tab-pane"> tab 2 content </div>
        <div id="tab3" class="tab-pane"> tab 3 content </div>
      </div>
    </div>

JS：

<script type="text/javascript">
        $(function() {

            $('.ajax').click(function (e) {
              var thisTab = e.target // activated tab
              var pageTarget = $(thisTab).attr('href');
              //get number of li in list of tabs:
              var itemNumber = $(this).parent().index()+1;
              $("#tab"+itemNumber).load(pageTarget);

            });
        });
    </script>

これは完全に機能しているようです-アンカーの宛先hrefを見つけ、その順序を計算します

  • 。

    私は2つの質問があります：

    1）プログラムでワークアウトしたいのはタブ＃tab4が存在する場合、その場合はajaxを介してコンテンツを挿入します。私が使用しているもの：if（$（ "＃tab" + itemNumber）.length> 0）

    しかし、これは逆の結果をもたらすようです-つまり、そこにある場合は、そうではないことを教えてくれます。どうしたの？- 変！

    2）＃tab4を持っている場合（今のところ静的に入れているとしましょう）、test.htmlのコンテンツが正常に読み込まれます（イェーイ）-しかし、私の問題は、タブを取得できないことです＃tab4をアクティブにするために切り替えます。「active」クラスを適用しようとしました。また、tab（）呼び出しを再適用しようとしましたが、それも機能しません。

    何か案は？

    前もって感謝します！

    編集：ここで遊ぶためのjsfiddleがあります：http：//jsfiddle.net/kneidels/wnHEF/1/

    • 4

    3 に答える 3

    5

    'active'クラスを削除してから、それを特定のタブペインに適用すると機能するようです。

    $('.tab-pane').removeClass('active');
$('#tab' + itemNumber).addClass('active');

    JSFiddle

    load()JSFiddleの例での使用も、私の例で期待どおりに機能します。

    JSFiddle

    ペインを動的に作成することに関しては、条件付きテストが機能しますが、単純化することもできます。

    if (!$('#tab' + itemNumber).length) { /* create new tab */ }

    簡単なテストはうまくいくようでした：

    for (var i = 0; i < 6; i++) {
  console.log("#tab" + i + " found: " + !!$('#tab' + i).length);
}

// #tab0 found: false
// #tab1 found: true
// #tab2 found: true
// #tab3 found: true
// #tab4 found: true
// #tab5 found: false

    JSFiddle

    于 2012-08-22T06:17:22.863 に答える
    1

    これは、Bootstrap3タブと非同期タブロードの私のソリューションです。それがあなたを助けることを願っています。まず、通常どおりBootstrap3タブのマークアップ。タブのコンテンツが空の場合に呼び出すには、タブのコンテンツにajaxリンクを保存する必要があることに注意してください。data-hrefを使用して保存しましたが、必要に応じて属性を変更できます。

    <ul id="tabs" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#basic" role="tab" data-toggle="tab">Basic</a></li>
    <li><a href="#description" role="tab" data-toggle="tab">Description</a></li>
    <li><a href="#imdb" role="tab" data-toggle="tab">IMDb</a></li>
    <li><a href="#subtitles" role="tab" data-toggle="tab">Subtitles</a></li>
    <li><a href="#files" role="tab" data-toggle="tab">Files</a></li>
    <li><a href="#peers" role="tab" data-toggle="tab">Peers</a></li>
    <li><a href="#tasks" role="tab" data-toggle="tab">Tasks</a></li></ul>

<div class="tab-content">
    <div class="tab-pane active fade in clearfix" id="basic">Basic content</div>
    <div class="tab-pane fade in" id="description">Description content</div>
    <div class="tab-pane fade in" id="imdb">IMDb</div>
    <div class="tab-pane fade in" id="subtitles" data-href="subtitles.html"></div>
    <div class="tab-pane fade in" id="files" data-href="files.html"></div>
    <div class="tab-pane fade in" id="peers" data-href="peers.html"></div>
    <div class="tab-pane fade in" id="tasks" data-href="tasks.html"></div></div>

    そして、イベントタブの変更をトリガーするjquery部分は、コンテンツが空かどうかを確認します。空の場合は、ajax関数を呼び出して、data-hrefに格納されているページを要求して置き換えます。

    <script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    var id = e.target.hash;
    if($(id).html()==="") {
        ajax_call($(id).attr('data-href'),"GET",null,function(data){
            $(id).html(data);
        });
    }
});
var hash = window.location.hash;
hash && $('#tabs a[href="' + hash + '"]').tab('show');
function ajax_call(url, type, data, callback) {
    $.ajax({
        url: url,
        type: type,
        async: false,
        data: data,
        success: function(data){
            callback(data);
        }
    });
}
</script>
    于 2014-07-31T02:07:33.853 に答える
    0

    これはあなたを助けるかもしれません、私はこれをブートストラップ3で使用します。バージョン2でも機能するはずです

    マルカットを定義する

    <ul class="nav nav-tabs" id="myTab">
  <li class="active blo_tabs"><a href="#blo_bor" data-toggle="tab"
          data-url="{% url "generar_bloque" %}"
          data-pars="listar=true&borrador&true"
          data-target="#blo_bor"
          >BORRADORES</a></li>
  <li><a class="blo_tabs" href="#blo_def" data-toggle="tab"
         data-url="{% url "generar_bloque" %}"
         data-pars="listar=true&definitivo&true"
         data-target="#blo_def"
          >DEFINITIVOS</a></li>
  <li><a class= "blo_tabs" href="#blo_proc" data-toggle="tab"
          data-url="{% url "generar_bloque" %}"
          data-pars="listar=true&enproceso&true"
          data-target="#blo_proc"
          >EN PROCESO</a></li>
</ul>

    これがjavascriptです

    <script type="text/javascript">
    $('.blo_tabs').on('shown.bs.tab', function (e) {
        tab = $(e.target); // activated tab
        warehouse_control.listar(
                tab.attr('data-url'),
                tab.attr('data-pars'),
                tab.attr('data-target')
        );
    });
</script>

    これはwarehouse_control.listarが持っているものです。

    listar: function(url, parametros, target){
        esperar.cubrir_especifico(target);
        $.get(url, parametros, function(response){
              $(target).html(response);
              esperar.descubrir();
         }, 'html' );
    }
    于 2014-01-30T19:57:37.637 に答える