Twitter bootstrap 引导嵌套可切换选项卡显示和活动功能不工作

我是新手

我用3个菜单项制作了一个简单的toogle选项卡部分，其中每个项都是选项卡列表。内容将显示在下面。 我的问题是，我似乎可以让“激活”功能正常工作。我希望其中一个选项卡处于活动状态，其中的内容默认显示。我希望你能帮忙

这是我的标记：

<div class="container-fluid billed-1">    

  <div class="row rustur1">

  <div class="col-md-12">          


   <!--studiestart-nav-start -->      
  <h2 class="text-center">Studiestart</h2>
  <ul class="nav nav-tabs nav-studiestart" role="tablist">



<!--skema start--->     
   <li role="presentation" class="dropdown dropned">

        <a href="skema" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents"><h3>skema</h3><span class="caret"></span></a>

         <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">

          <li><a href="#dropdown12" class="active" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Bachelor</a></li>


           <li><a href="#dropdown10" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Tilvalg</a></li>

        <li><a href="#dropdown11" role="tab" id="dropdown3-tab" data-toggle="tab" aria-controls="dropdown3">Merit</a></li>




        </ul>
      </li>   

<!--skema slut---> 
   <!--Books start---> 

<li role="presentation" class="dropdown dropned">
        <a href="books" id="myTabDrop" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop-contents"><h3>Bøger</h3><span class="caret"></span></a>

         <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">

          <li><a href="#dropdown6" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Medie- og kulturhistorie I</a></li>


           <li><a href="#dropdown7" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Medieteori og -analyse I</a></li>

        <li><a href="#dropdown8" role="tab" id="dropdown3-tab" data-toggle="tab" aria-controls="dropdown3"> Metode og undersøgelsesdesign</a></li>

             <li><a href="#dropdown9" role="tab" id="dropdown4-tab" data-toggle="tab" aria-controls="dropdown4">Videnskabsteori</a></li>   

        </ul>
      </li>    

<!--books slut---> 
 <!--fag start--->    

<li role="presentation" class="dropdown dropned">
        <a href="fag" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop2-contents"><h3>Fag</h3><span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">

          <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Medie- og kulturhistorie I</a></li>


           <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Medieteori og -analyse I</a></li>

        <li><a href="#dropdown3" role="tab" id="dropdown3-tab" data-toggle="tab" aria-controls="dropdown3"> Metode og undersøgelsesdesign</a></li>

             <li><a href="#dropdown4" role="tab" id="dropdown4-tab" data-toggle="tab" aria-controls="dropdown4">Videnskabsteori</a></li>   

        </ul>
      </li>


<!--skema fag slut--->     


 <!--studiestart-nav-slut -->                            



    <div class="studiestart">


    <div class="tab-content">

       <!--studiestart-skema start  --> 

        <div role="tabpanel" class="tab-pane fade active" id="dropdown12" aria-labelledBy="dropdown3-tab">

<p>          
  The Content her is what i want to be shown here as default   
   </p> 

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown10" aria-labelledBy="dropdown3-tab">


<table class="table table-striped table-condensed table-bordered table-hover">
Table content her
</table>

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown11" aria-labelledBy="dropdown3-tab">

<table class="table table-striped table-condensed table-bordered table-hover">
Table content her
</table>

      </div>





       <!--studiestart-skema slut  --> 

           <!--studiestart-books start  --> 



        <div role="tabpanel" class="tab-pane fade" id="dropdown6" aria-labelledBy="dropdown1-tab">

   <p>          
   Content her     
   </p> 

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown7" aria-labelledBy="dropdown1-tab">

<p>          
   Content her     
   </p>      

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown8" aria-labelledBy="dropdown1-tab">

<p>          
   Content her     
   </p> 

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown9" aria-labelledBy="dropdown1-tab">

<p>          
   Content her     
   </p> 

      </div>



           <!--studiestart-books slut--> 
     <!--studiestart-fag-start  --> 

<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">

   <p>          
   Content her     
   </p> 

      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">


       <p>          
   Content her     
   </p> 


      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown3" aria-labelledBy="dropdown3-tab">
   <h3>METODE OG UNDERSØGELSESDESIGN I</h3><h5>- V. KIM SKJOLDBORG JØRGENSEN</h5>
<p>          
   Content her     
   </p> 
      </div>

      <div role="tabpanel" class="tab-pane fade" id="dropdown4" aria-labelledBy="dropdown4-tab">

   <p>          
   Content her     
   </p> 


    </div>
    </div>

    </div>    
    </ul>     

    </div>  
    </div>     
    </div>

研究开始

























她的内容是我希望在这里显示为默认内容的内容

她吃得饱饱的
她吃得饱饱的

满足她


满足她


满足她


满足她


满足她


满足她

METODE OG UNDERSØGELSESDESIGN I-V.KIM SKJOLDBORG JØRGENSEN

满足她


满足她

如果您有一个更简单的示例，这样人们就可以立即看到代码的哪一部分是相关的，这会很有帮助。是的，我考虑过这一点，但我认为如果混合使用两个或更多嵌套的选项卡，就会出现问题。说实话，我真的不知道。