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

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> 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

使用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