Bootstrap 2.1 javascript嵌套选项卡：内部选项卡关闭外部选项卡

Question

我想我会在提交bugreport之前询问SO的帮助。我在另一个选项卡中有一个twitter引导程序选项卡，单击以切换到下一个内部选项卡，bootstrap.js不仅从最接近的.tab窗格中删除.active，还从外部.tab窗格中删除.active。我试图深入代码，但我的JavaScript不够好，不能完全理解它。我试图用jquery手动将活动类添加到外部.tab-pane，并在data-toggle =“tab”元素上尝试.tab（'show'）。似乎bootstrap.js发现全部为 .tab-content，然后将其从子项中移除.active。或者，也许我在标记中出现了错误（从经验的99％来看，这是人为错误）。 javascript是所有的样板，我只是用标签（'show'）调用第一个标签。这里是我的标记：

<ul id="sidebar" class="unstyled naviTab"> 
    <li class="accordion-group">...</li> 
    <li class="accordion-group active"> 
     <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2> 
    </li> 
</ul> 
... 
... 
<ul class="unstyled tab-content"> 
    <li id="course" class="tab-pane"> 
    <li id="getting-started" class="tab-pane active"> 
     <div class="wizard stepTab"> 
      <a class="active" href="#module1-step1" data-toggle="tab">1.Step</a> 
      <a class="" href="#module1-step2" data-toggle="tab">2.Step</a> 
      <a class="" href="#module1-step3" data-toggle="tab">3.Step</a> 
     </div> 
     <ul class="links unstyled tab-content"> 
      <li id="module1-step1" class="tab-pane active" data-original-title="">...</li> 
      <li id="module1-step2" class="tab-pane"> 
      <li id="module1-step3" class="tab-pane"> 
     </ul> 
    </li> 
</ul> 

并且点击后HREF =“＃模块1，第二步”：

<ul id="sidebar" class="unstyled naviTab"> 
    <li class="accordion-group">...</li> 
    <li class="accordion-group active"> 
     <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2> 
    </li> 
</ul> 
... 
... 
<ul class="unstyled tab-content"> 
    <li id="course" class="tab-pane"> 
    <li id="getting-started" class="tab-pane"> 
     <div class="wizard stepTab"> 
      <a class="" href="#module1-step1" data-toggle="tab">1.Step</a> 
      <a class="active" href="#module1-step2" data-toggle="tab">2.Step</a> 
      <a class="" href="#module1-step3" data-toggle="tab">3.Step</a> 
     </div> 
     <ul class="links unstyled tab-content"> 
      <li id="module1-step1" class="tab-pane" data-original-title="">...</li> 
      <li id="module1-step2" class="tab-pane active"> 
      <li id="module1-step3" class="tab-pane"> 
     </ul> 
    </li> 
</ul> 

通知外制表窗格怎么都无效。

如果有人遇到了这个问题，或者可以告诉我我在哪里搞砸了，我会非常感激！

EDIT1 这是我的javascript。我实际上不必包含任何js，因为bootstrap.js只需使用html属性即可正常工作（这可能是它打破的原因）。我尝试了不同的方法（.each（），e.​​preventDefault（）），但似乎没有任何工作。但这里是我的js：

<script> 
/*global $*/ 
"use strict"; 
$(function() { 
    $('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead 
    $('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in 
    $('.stepTab a').click(function() { 
     if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work... 
      $(this).closest('li').addClass('active'); 
     } 
     $(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's 
     $(this).addClass('active'); 
    }); 
}); 
</script> 

欢呼任何建议！

Answer 1

也许这应该有助于http://www.juvenpajares.com/?p=204自定义手风琴使用引导程序框架

Answer 2

的问题是，我没有使用在内部标签的联系，而只是用的DIV（不得不这样做对CSS的原因）。我不知道引导程序要求链接采用ul> li>格式。现在知道了！如果有人遇到同样的问题，我会留下问题。欢呼的帮助！

Answer 3

正如albertedevigo说，你只需要提供一个唯一的ID对每个选项卡，没有如果标签被嵌套的事情，这是因为JavaScript操作会打开/关闭这个特定的标签：

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>I'm in Section 1.</p> 
    </div> 
    <div class="tab-pane" id="tab2"> 
     <p>Howdy, I'm in Section 2.</p> 
     <div class="tabbable"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li> 
       <li><a href="#tab4" data-toggle="tab">Section 4</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab3"> 
        <p>I'm in Section 3.</p> 
       </div> 
       <div class="tab-pane" id="tab4"> 
        <p>Howdy, I'm in Section 4.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

看看jsfiddle.net/simbirsk/RS4Xh/2