使用带有选项卡的 twitter 引导程序 - ajax 内容

Question

所以我知道 bootstrap 没有对 ajax 的默认支持，称为标签内容，就像 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 > 0)

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

和 2) 如果我有我确实有让选项卡切换以使#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 选项卡和异步选项卡加载的解决方案。希望对您有所帮助。 首先，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部分触发事件tab改变，检查内容是否为空。如果为空，调用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' );
    }