Me han anidado las pestañas de inicio, y aquí está el código: http://jsfiddle.net/RLdYC/

JS:

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

HTML:

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

El problema es que, tan pronto como usted haga clic en una ficha diferente en la fila superior, el contenido real de la ficha anidada de abajo se ocultan. Necesito el contenido de la primera subpestaña para ser mostrado.

He intentado activar el click() de la función en el primer subficha, pero no ayuda. Puede usted por favor escriba el código que necesito arreglar esto?

InformationsquelleAutor Merik | 2013-10-18

2 Comentarios

  1. 40

    Usted tiene más de un elemento con id myTabContent.

    HTML id debe ser único en la página.

    Simplemente quitar los ids o clases de uso en lugar de (demo aquí).

    JS:

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

    HTML:

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

    • Mi Id eran únicas, pero el enlace a la demo era exactamente lo que necesitaba, gracias!
  2. 3

    Trate de usar este:

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

Dejar respuesta

Please enter your comment!
Please enter your name here