jquery - 使用带有选项卡式的 twitter bootstrap - ajax 内容

Question

所以我知道 bootstrap 不像 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>

这似乎工作得很好 - 它找到了 anchor 的目标 href，并计算出

的顺序。

我有 2 个问题:

1)我想以编程方式计算选项卡 #tab4 是否存在，如果存在，则通过 ajax 插入内容。我在用: if ($("#tab"+itemNumber).length > 0)

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

和2)如果我有#tab4(假设我现在已经将其静态放入)，那么test.html中的内容将成功加载(是的) - 但我的问题是现在我不能切换选项卡以使 #tab4 成为事件选项卡。我尝试过应用“active”类，也尝试过重新应用 tab() 调用，但这也不起作用。

有什么想法吗？

提前致谢!

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

Answer 1

删除“事件”类，然后将其应用到特定的选项卡 Pane 似乎可行。

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

JSFiddle

<小时/>

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

JSFiddle

关于动态创建 Pane ，您的条件测试对我有用，尽管它可以简化:

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