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>
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 eldisplay: none;
simplemente hacé un$('#pestañas a:first:visible').tab('show')
.#Pestaña1
pero en el HTML se veid="prueba1"
, es un error de tipeo? Corregilo si es así así te respondo correctamente.