tab lồng nhau trong bootstrap

Question

Tôi đã lồng tab trong Bootstrap, và đây là mã: 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>

Vấn đề là, ngay sau khi bạn click vào một tab khác nhau trên đỉnh hàng, nội dung thực tế của tab lồng nhau bên dưới sẽ bị ẩn. Tôi cần nội dung của tab phụ đầu tiên được hiển thị.

Tôi đã cố gắng kích hoạt hàm click() trên tab phụ đầu tiên, nhưng nó không giúp ích gì. Bạn có thể viết mã mà tôi cần sửa không?

Answer 1

Bạn có nhiều hơn một phần tử có id myTabContent.

Id HTML phải là duy nhất trên trang.

Chỉ cần xóa các id đó hoặc sử dụng các lớp thay thế (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

Hãy thử sử dụng này:

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