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

嵌套选项卡在bootstrap中不是这样的。你应该使用Dropdown。

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 2

你有两个id相同的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 3

有一个比喻问题：修正如下：试试这个：

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