嵌套的标签

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>