0

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 ng-hide="newUser">Heading</h3>
  </div>
 
  </div>   
      <ul class="nav nav-tabs"id="tabContent">
        <li class="active"><a href="#details" data-toggle="tab">Details</a></li>
        <li><a href="#access-security" data-toggle="tab">Access / Security</a></li>
        <li><a href="#networking" data-toggle="tab">Networking</a></li>
      </ul>
  
      <div class="tab-content">
        <div class="tab-pane active" id="details"></div>
   
      <div class="control-group">
        <label class="control-label">Instance Name</label>
        </div>
      </div>
        
      <div class="tab-content">
        <div class="tab-pane" id="access-security">
        content 0
        </div> 
      </div>

      <div class="tab-content">
        <div class="tab-pane" id="networking">
        content 1
       </div> 
      </div>

como le puedo hacer que cada pestaña, muestre su propio texto, ya que si se selecciona la primer pestaña si sale su texto Instance Name y si se selecciona la siguiente, parece content 0 y luego content 1, pero siempre debajo del otro y yo necesito que cada uno se muestre en su respectiva pestaña, que si cambio de pestaña solo aparezca lo que corresponde a ese

1
  • En serio estás utilizando Bootstrap v2? el 23 abr. 2021 a las 19:16

1 respuesta 1

1

Tienes mal la estructura de tus componentes internos.

Necesitas únicamente 1 contenedor con clase .tab-content y dentro de él cada uno de los .tab-pane a los que haces referencia en tu elemento <ul>, no tres .tab-content.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="tabContent">
  <li class="active"><a href="#details" data-toggle="tab">Details</a></li>
  <li><a href="#access-security" data-toggle="tab">Access / Security</a></li>
  <li><a href="#networking" data-toggle="tab">Networking</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="details">
    <!-- contenido primer tab -->
    <div class="control-group">
      <label class="control-label">Instance Name</label>
    </div>
    <!-- fin contenido 1er tab-->
  </div>

  <div class="tab-pane" id="access-security">content 0</div>

  <div class="tab-pane" id="networking">content 1</div>
</div>

PD: Actualizar la versión de Bootstrap 2 a 3 (luego puedes pasarte a la 4, o incluso la 5 que está en su beta final) no es tan tedioso si buscas en la sección de migración

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.