0

Hola comunidad espero me puedan ayudar con esto ya que aun no he podido resolverlo de antemano muchas gracias por su ayuda.

Tengo una modal y y dentro de ella tengo 3 tabs o pestañas no visibles.

Cuando abro la modal solo muestro 2 pestañas a veces 3 o a veces 1.(Esto depende de la fila que expanda en mi grid(jqxgrid) y cuando de clic al botón actualizar se abre la modal con estas pestañas).

mi pregunta es: ¿Si tengo la pestaña 2 y la pestaña 3 en el modal como puedo activar la pestaña 2. Si tengo las 3 pestañas en el modal como puedo activar la primera pestaña y si tengo solo la tercera pestaña visible en mi modal como puedo cargarla activa en el modal?.

Este es mi código

// Este es mi codigo que utilizo para mostrar siempre la primera tab pero solo funciona cuando la primera pestaña aparece en la modal

 $("#pestañas a:first").tab('show');
 
 
 //Cuando expando la fila de mi grid de jquery (jqxgrid), este tiene un subgrid o un grid anidado el cual me muestra las pestañas que seran visbles y esta informacion la muestro en los inputs al dar clic en el boton editar.
//Recorro la información del subgrid y de esta manera obtengo solo las pestaña que tiene el subgrid cuando expando una fila. 
 
   for (var z = 0; z < array_detalle_subgrid.length; z++) {
                                 
     for (var key in array_detalle_subgrid[z]) {                                     

    if (array_detalle_subgrid[z][key] == "prueba1") {
                                            $("#Prueba1").css("display", "inline-block");
                                            
             }
    if (array_detalle_subgrid[z][key] == "prueba2") {
                                            $("#Prueba2").css("display", "inline-block"); 
          }
          
    if (array_detalle_subgrid[z][key] == "prueba3") {
                                            $("#Prueba3").css("display", "inline-block");
          
      }
      
      }
      
      }
   $("#Popup").modal('show');
      
      
  // De esta manera controlo la visualizacion de las pestañas visibles.
      
      
<div class="container">
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
       
        <div class="modal-body">
          
          <div role="tabpanel">
                        <ul class="nav nav-tabs" id="pestañas">
                      <li id="prueba1" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab"
                                href="#Prueba1">Pestaña 1</a></li>
                      <li id="prueba2" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab" 
                                href="#Prueba2">Pestaña 2</a> </li>
                      <li id="prueba3" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab" 
                         href="#Prueba3">Pestaña 3</a> </li> 
              
                <div class="tab-content">  
                                     
                <div id="Prueba1" class="container tab-pane">
                    <h6>Objetivo</h6>
                </div>
                
                 <div id="Prueba2" class="container tab-pane">
                    <h6>Objetivo 2</h6>
                </div>
                
                 <div id="Prueba3" class="container tab-pane">
                    <h6>Objetivo 3</h6>
                </div>
                
            </div>
            
          <div>
          
        </div>
       
      </div>
      
    </div>
  </div>
  
</div>

6
  • Si solo el tercer tab esta visible, deseas mostrar el primero???
    – Kamousagi
    Commented el 2 jul. 2019 a las 17:27
  • Hola @Kamousagi, si mostrar el tab que esta visible. Si solo el tercer tab esta visible deseo mostrar ese tab. Si hay dos tabs visibles en la modal deseo mostrar activa la primera tab de esas dos. Espero me haya explicado bien.
    – SHINOBI
    Commented el 2 jul. 2019 a las 17:31
  • El display: none es algo que le pones a mano solo a las pestañas que querés ocultar? O como determinás que pestañas si son visibles? Si las pestañas visibles no van a tener el display: none; simplemente hacé un $('#pestañas a:first:visible').tab('show').
    – azeós
    Commented el 2 jul. 2019 a las 18:24
  • Hola @azeós he editado mi pregunta espero puedas ayudarme.
    – SHINOBI
    Commented el 2 jul. 2019 a las 18:47
  • En el código JS hacés referencia a #Pestaña1 pero en el HTML se ve id="prueba1", es un error de tipeo? Corregilo si es así así te respondo correctamente.
    – azeós
    Commented el 2 jul. 2019 a las 18:57

3 respuestas 3

2

Esto activa el primer tab (li>a) y luego muestra su contenido.

 $(document).ready(function() {
  $("#myModal").modal("show");
  $("#pestañas a:first").parent("li").show();
  $("#pestañas a:first").tab('show'); 
 });
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
       
        <div class="modal-body">
          
          <div role="tabpanel">
                        <ul class="nav nav-tabs" id="pestañas">
                      <li id="prueba1" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab"
                                href="#Prueba1">Pestaña 1</a></li>
                      <li id="prueba2" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab" 
                                href="#Prueba2">Pestaña 2</a> </li>
                      <li id="prueba3" class="nav-item" style="display:none"><a class="nav-link font-weight-bold" data-toggle="tab" 
                         href="#Prueba3">Pestaña 3</a> </li> 
              
                <div class="tab-content">  
                                     
                <div id="Prueba1" class="container tab-pane">
                    <h6>Objetivo</h6>
                </div>
                
                 <div id="Prueba2" class="container tab-pane">
                    <h6>Objetivo 2</h6>
                </div>
                
                 <div id="Prueba3" class="container tab-pane">
                    <h6>Objetivo 3</h6>
                </div>
                
            </div>
            
          <div>
          
        </div>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

1
  • Hola @kamousagi tu respuesta esta muy bien pero no funciona como esperaba ya que si solo tengo la pestaña 2 y la pestaña 3 este me muestra y me activa la pestaña 1. Entonces si tengo la pestaña 2 y la pestaña 3 como puedo activar la pestaña 2. Si tengo las 3 pestañas como puedo activar la primera y si tengo solo la tercera pestaña visible en mi modal como puedo cargarla activa en el modal en verdad gracias y espero puedas seguirme ayudando.
    – SHINOBI
    Commented el 2 jul. 2019 a las 18:18
1

Después de mostrar los tabs que corresponden activás el primero que esté visible desde jQuery (no antes).

for (var z = 0; z < array_detalle_subgrid.length; z++) {

    for (var key in array_detalle_subgrid[z]) {

        if (array_detalle_subgrid[z][key] == "prueba1") {
            $("#Prueba1").css("display", "inline-block");
        }

        if (array_detalle_subgrid[z][key] == "prueba2") {
            $("#Prueba2").css("display", "inline-block");
        }

        if (array_detalle_subgrid[z][key] == "prueba3") {
            $("#Prueba3").css("display", "inline-block");
        }

    }

}

$('#pestañas .nav-item:visible:first a').tab('show');

$("#Popup").modal('show');

La otra opción es aprovechar que ya estás recorriendo todos los tabs y mostrar el primero, pero tal vez es más difícil de leer:

var visible = false; // Indica si ya mostramos un tab

for (var z = 0; z < array_detalle_subgrid.length; z++) {

    for (var key in array_detalle_subgrid[z]) {

        if (array_detalle_subgrid[z][key] == "prueba1") {
            $("#Prueba1").css("display", "inline-block");

            // Si todavía no se mostró ningún tab, se muestra éste
            if ( ! visible) {
                $('#Prueba1 a').tab('show');
                visible = true;
            }
        }

        if (array_detalle_subgrid[z][key] == "prueba2") {
            $("#Prueba2").css("display", "inline-block");

            // Si todavía no se mostró ningún tab, se muestra éste
            if ( ! visible) {
                $('#Prueba2 a').tab('show');
                visible = true;
            }
        }

        if (array_detalle_subgrid[z][key] == "prueba3") {
            $("#Prueba3").css("display", "inline-block");

            // Si todavía no se mostró ningún tab, se muestra éste
            if ( ! visible) {
                $('#Prueba3 a').tab('show');
                visible = true;
            }
        }

    }

}

$("#Popup").modal('show');
1
  • Hola @azeós muchas gracias por tu ayuda sinceramente no pude implementar la primera solución que me proporcionaste pero me sirvió la segunda. Intentare ver si puedo implementar la primera ya que es menos codigo de cualquier forma muchas gracias por tu ayuda.
    – SHINOBI
    Commented el 2 jul. 2019 a las 22:58
0

la respuesta que pusieron es excelente pero aqui te tengo un sencillo script con javascript aunque tambien lo puedes adaptar para Jquery:

primero seleccionas el elemento:

var elemento = document.getElementById("prueba1");

despues agregas el siguiente CSS3 al la tang style de tu elemento:

style="display:none div.style.display ='block'!important; "

aunque este tipo de estilo te sugiero que no se lo Pongas en la etiqueta porque es muy mal codigo ( yo lo hice con el ejemplo de tu codigo) con tan solo una linea y un poco de style css3 puedes hacer eso.

te invito a que leeas este post es muy interesante sobre como mostrar y ocultar elmentos con jquery. fuente en español

SALUDOS ESPERO QUE TE ALLA AYUDADO.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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