嵌套的標籤

Question

我已經在引導嵌套的標籤，這裏是代碼：http://jsfiddle.net/RLdYC/

$("ul.nav-tabs a").click(function (e) { 
 
    e.preventDefault(); 
 
    $(this).tab('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<div class="tabbable boxed parentTabs"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#set1">Tab 1</a> 
 
     </li> 
 
     <li><a href="#set2">Tab 2</a> 
 
     </li> 
 
    </ul> 
 
    <div id="myTabContent" 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="#sub11">Tab 1.1</a> 
 
        </li> 
 
        <li><a href="#sub12">Tab 1.2</a> 
 
        </li> 
 
       </ul> 
 
       <div id="myTabContent" class="tab-content"> 
 
        <div class="tab-pane fade active in" id="sub11"> 
 
         <p>Tab 1.1</p> 
 
        </div> 
 
        <div class="tab-pane fade" id="sub12"> 
 
         <p>Tab 1.2</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tab-pane fade" id="set2"> 
 
      <div class="tabbable"> 
 
       <ul class="nav nav-tabs"> 
 
        <li class="active"><a href="#sub21">Tab 2.1</a> 
 
        </li> 
 
        <li><a href="#sub22">Tab 2.2</a> 
 
        </li> 
 
       </ul> 
 
       <div id="myTabContent" class="tab-content"> 
 
        <div class="tab-pane fade active in" id="sub21"> 
 
         <p>Tab 2.1</p> 
 
        </div> 
 
        <div class="tab-pane fade" id="sub22"> 
 
         <p>Tab 2.2</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

的問題是，只要你點擊不同的選項卡上的頂部行，下面嵌套選項卡的實際內容將隱藏起來。我需要顯示第一個子標籤的內容。

我試圖觸發第一個子選項卡上的click（）函數，但它沒有幫助。你能寫出我需要解決這個問題的代碼嗎？

Answer 1

您有多個ID爲myTabContent的元素。

HTML ID在頁面中應該是唯一的。

只需刪除這些ID或使用類別（working demo here）。

$("ul.nav-tabs a").click(function (e) { 
 
    e.preventDefault(); 
 
    $(this).tab('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="tabbable boxed parentTabs"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#set1">Tab 1</a> 
 
     </li> 
 
     <li><a href="#set2">Tab 2</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="#sub11">Tab 1.1</a> 
 
        </li> 
 
        <li><a href="#sub12">Tab 1.2</a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content"> 
 
        <div class="tab-pane fade active in" id="sub11"> 
 
         <p>Tab 1.1</p> 
 
        </div> 
 
        <div class="tab-pane fade" id="sub12"> 
 
         <p>Tab 1.2</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="tab-pane fade" id="set2"> 
 
      <div class="tabbable"> 
 
       <ul class="nav nav-tabs"> 
 
        <li class="active"><a href="#sub21">Tab 2.1</a> 
 
        </li> 
 
        <li><a href="#sub22">Tab 2.2</a> 
 
        </li> 
 
       </ul> 
 
       <div class="tab-content"> 
 
        <div class="tab-pane fade active in" id="sub21"> 
 
         <p>Tab 2.1</p> 
 
        </div> 
 
        <div class="tab-pane fade" id="sub22"> 
 
         <p>Tab 2.2</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

嘗試使用這樣的：

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