Question

所以我理解bootstrap没有默认支持ajax，称为tab的内容，就像jQuery UI那样。

我已经在其他问题的帮助下进行了管理，想出了以下解决方案，那种工作：

    <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，它按照

的顺序排列。

我有两个问题：

1）我想以编程方式编写标签＃tab4存在，如果是 - 然后通过ajax插入内容。我在用： if（$（“＃tab”+ itemNumber）。length＆gt; 0）

但这似乎给出了相反的结果 - 即，如果它存在，它告诉我它不是。那是怎么回事？ - 很奇怪！

和2）如果我有＃tab4（假设我现在静态放入），那么test.html中的内容已成功加载（yay） - 但我的问题是现在我不能获取选项卡以切换到使#tab4成为活动的标签。我已尝试应用“活动”类，并尝试重新应用tab（）调用，但这也无效。

任何想法？

提前感谢！

编辑：这是一个可以玩的jsfiddle：http://jsfiddle.net/kneidels/wnHEF/1/

Answer 1

删除“活动”类，然后将其应用于特定选项卡窗格似乎可以正常工作。

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

JSFiddle

在JSFiddle示例中使用load()也可以在我的示例中按预期工作。

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

Answer 2

这是我的Bootstrap 3 Tab和异步标签加载的解决方案。希望它能帮到你。首先，Bootstrap 3 Tab的标记正常。请注意，如果制表符的内容为空，则制表符内容必须存储要调用的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>

Answer 3

这可能对你有帮助，我在bootstrap 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' );
    }

使用带有tabbed的twitter bootstrap - ajax内容

3 个答案:

JSFiddle

JSFiddle

JSFiddle