嵌套Bootstrap选项卡没有正确加载内容

我正在使用Bootstrap项目，并且我加载了一些嵌套选项卡。嵌套Bootstrap选项卡没有正确加载内容

我有一个设计师选项卡和一个代码每个选项卡下的选项卡是更多选项卡。

问题是，当我更改选项卡设计师到代码反之亦然嵌套的标签不会加载默认情况下，有内容的，必须进行选择。

仅当父标签页更改时才加载页面时不会发生这种情况。

演示可用here，对不起，描述是相当薄弱的难以解释我的意思是如果您查看演示更容易理解。

注：在演示的CSS和JS的大部分是Prism.js扩展，我不认为这是造成问题的原因（因为它发生没有），但我包含的代码只是柜面。

参考：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="" role="tabpanel" data-example-id="togglable-tabs"> 
       <ul id="main-tabs" class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="active"><a href="#des" id="des-tab" role="tab" data-toggle="tab" aria-controls="des" aria-expanded="true">Designer</a></li> 
        <li role="presentation"><a href="#code" role="tab" id="code-tab" data-toggle="tab" aria-controls="code">Code</a></li> 
       </ul> 
       <div id="myTabContent" class="tab-content"> 
        <div role="tabpanel" class="tab-pane fade in active" id="des" aria-labelledby="des-tab"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs"> 
            <ul id="myTab" class="nav nav-tabs" role="tablist"> 
             <li role="presentation" class="active dropdown"> 
              <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Look <span class="caret"></span></a> 
              <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> 
               <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Text</a></li> 
               <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Color</a></li> 
              </ul> 
             </li> 
            </ul> 
            <div id="myTabContent" class="tab-content"> 
             <div role="tabpanel" class="tab-pane fade in active" id="dropdown1" aria-labelledby="dropdown1-tab"> 
              <div class="panel panel-default"> 
               <div class="panel-heading"> 
                <h3 class="panel-title">Text</h3> 
               </div> 
               <div class="panel-body"> 
                <div class="row"> 
                 <div class="col-sm-6"> 
                  Font-Family 
                 </div> 
                 <div class="col-sm-6"> 
                  <div class="btn-group"> 
                   <button type="button" class="btn btn-default">Action</button> 
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
                    <span class="caret"></span> 
                    <span class="sr-only">Toggle Dropdown</span> 
                   </button> 
                   <ul class="dropdown-menu" role="menu"> 
                    <li><a href="#">Lato</a></li> 
                    <li><a href="#">Serif</a></li> 
                   </ul> 
                  </div> 
                 </div> 
                </div> 
                <div class="row"> 
                 <div class="col-sm-6"> 
                  Font-Size 
                 </div> 
                 <div class="col-sm-6"> 
                  <div class="input-group"> 
                   <input type="text" class="form-control" aria-label="..."> 
                   <div class="input-group-btn"> 
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> 
                    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
                     <li><a href="#">px</a></li> 
                     <li><a href="#">em</a></li> 
                    </ul> 
                   </div> 
                  </div> 
                 </div> 
                </div> 
               </div> 
              </div> 
             </div> 
             <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab"> 
              <p>Test</p> 
             </div> 
            </div> 
           </div> 


          </div> 
          <div class="col-sm-6"> 
           <div class="browser-mockup"> 
            <img src="http://placehold.it/500x300/fff/eee" /> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <pre><code class="language-markup">&lt;p>Hello World&lt;/p></code></pre> 
          </div> 
          <div class="col-sm-6"> 
           <div class="" role="tabpanel" data-example-id="togglable-tabs"> 
            <ul class="nav nav-tabs" role="tablist"> 
             <li role="presentation" class="active"><a href="#sass" id="sass-tab" role="tab" data-toggle="tab" aria-controls="sass" aria-expanded="true">SASS</a></li> 
             <li role="presentation"><a href="#less" role="tab" id="less-tab" data-toggle="tab" aria-controls="less">LESS</a></li> 
             <li role="presentation"><a href="#css" role="tab" id="css-tab" data-toggle="tab" aria-controls="css">CSS</a></li> 
            </ul> 
            <div id="myTabContent" class="tab-content"> 
             <div role="tabpanel" class="tab-pane fade in active" id="sass" aria-labelledby="sass-tab"> 
              <pre><code class="language-scss">p {color:red}</code></pre> 
             </div> 
             <div role="tabpanel" class="tab-pane fade" id="less" aria-labelledby="less-tab"> 
              <pre><code class="language-less">p {color:red}</code></pre> 
             </div> 
             <div role="tabpanel" class="tab-pane fade" id="css" aria-labelledby="css-tab"> 
              <pre><code class="language-css">p {color:red}</code></pre> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-04-05 Otis Wright