Bootstrap 3 вкладки вложения

Question

Я создаю приложение, и есть много контента, поэтому я помещаю их в вложенные вкладки. Все работает хорошо, за исключением случаев, когда я нажимаю на вложенную вкладку, содержимое не отображается.

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#minecraft" data-toggle="tab">Minecraft</a></li> 
    <li><a href="#website" data-toggle="tab">Forums</a></li> 
    <li><a href="#pokemasters" data-toggle="tab">Pokemasters</a></li> 
    <li><a href="#runerage" data-toggle="tab">Rune Rage</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane fade in active" id="minecraft"> 
    <ul class="nav nav-pills" id="pills"> 
     <li class="active"><a href="#minecraft-registration" data-toggle="tab">Minecraft Registration</a></li> 
     <li><a href="#minecraft-rules" data-toggle="tab">Rules</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" id="minecraft-registration"> 
      <div class="tab-pane fade" id="minecraft-registration"> 
       test 
      </div> 
     </div> 
    </div> 
    </div> 

    <div class="tab-pane fade" id="website">Forums</div> 
    <div class="tab-pane fade" id="pokemasters">Pokemasters</div> 
    <div class="tab-pane fade" id="runerage">Rune Rage</div> 
</div> 

Код выше производит это:

Это, однако функциональное содержание вложенной вкладке не отображается. Содержимое должно показывать test, но оно пустое.

Answer 1

У вас есть 2 div с одинаковым идентификатором. Это проблема. Удалите дополнительный div, как показано ниже.

Преобразовать

<div class="tab-pane fade in active" id="minecraft-registration"> 

    <div class="tab-pane fade" id="minecraft-registration"> 
     test 
    </div> 
</div> 

к

<div class="tab-pane fade" id="minecraft-registration"> 
    test 
</div> 

Answer 2

Вложенные вкладки не нравится в загрузчике. Вы должны использовать Dropdowns.

Working Demo

HTML

<li class="dropdown active"> 
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Minecraft <b class="caret"></b></a> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
      <li class=""><a href="#minecraft" tabindex="-1" data-toggle="tab">Minecraft Registration</a></li> 
      <li class=""><a href="#minecraftrules" tabindex="-1" data-toggle="tab">Rules</a></li> 
      </ul> 
     </li> 

Answer 3

Имел проблему similor: Фиксированный это следующим образом: Попробуйте это:

<div class="row"> 
     <div class="col-md-12"> 
     <!-- Custom Tabs --> 
      <div class="nav-tabs-custom"> 
      <ul class="nav nav-tabs"> 
     <li class="active"><a href="#set1">New</a> 
     </li> 
     <li><a href="#set2">Confirmed</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 

     <div class="tab-pane fade active in" id="set1"> 

      <div class="tabbable"> 
       <ul class="nav nav-tabs"> 
       <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li> 
       <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li> 
       <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li> 
       <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li> 
       <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li> 
       <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li> 
       <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab_1"> 
       <b>Web Deign and development hires:</b> 




       <table class="table" id="webdesignTable">     
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 



       </div> 
       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_2"> 
       <b>Domain Registration</b> 


       <table class="table" id="domainregistrationTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 



       </div> 
       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_3"> 
       <b>Cloud Computing</b> 


       <table class="table" id="cloudcomputingTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_4"> 
       <b>Android application Development</b> 


       <table class="table" id="androidappTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_5"> 
       <b>Web Hosting</b> 


       <table class="table" id="webhostingTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_6"> 
       <b>SEO and Online Marketing</b> 


       <table class="table" id="seoTable">     
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 
      </div> 
      <!-- /.tab-content --> 
      </div> 

     </div> 

     <div class="tab-pane fade" id="set2"> 
      <div class="tabbable"> 
        <ul class="nav nav-tabs"> 
       <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">Web Design and Development</a></li> 
       <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">Domain Registration</a></li> 
       <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">Cloud Computing Services</a></li> 
       <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">Android application Development</a></li> 
       <li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="false">Web Hosting</a></li> 
       <li class=""><a href="#tab_6" data-toggle="tab" aria-expanded="false">SEO and Online Marketing</a></li> 
       <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab_1"> 
       <b>Web Deign and development hires:</b> 




       <table class="table" id="webdesignTable">     
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 



       </div> 
       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_2"> 
       <b>Domain Registration</b> 


       <table class="table" id="domainregistrationTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 



       </div> 
       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_3"> 
       <b>Cloud Computing</b> 


       <table class="table" id="cloudcomputingTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_4"> 
       <b>Android application Development</b> 


       <table class="table" id="androidappTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_5"> 
       <b>Web Hosting</b> 


       <table class="table" id="webhostingTable">      
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 

       <!-- /.tab-pane --> 
       <div class="tab-pane" id="tab_6"> 
       <b>SEO and Online Marketing</b> 


       <table class="table" id="seoTable">     
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th>Order By</th>             
          <th>Phone</th> 
          <th>Email</th> 
          <th>Message</th> 
          <th>Date</th>            
          <th>Status</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
       </table> 
       </div> 
       <!-- /.tab-pane --> 
      </div> 
      <!-- /.tab-content --> 
      </div> 
     </div> 

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