Fecha y hora actual: Lunes 23 Sep 2019 09:35
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Bootstrap TABS Boton->abrir TAB

Responder al Tema

Índice del Foro > PHP > Bootstrap TABS Boton->abrir TAB

Autor Mensaje
raulgs82



Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Miércoles 13 Ene 2016 17:34

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas,
Resulta que he creado un "TAB" del bootstrap.
(Son como unas lenguetas, donde cada una de ellas tiene una sección diferente)

Me gustaría hacer un botón, para que se mostrara un TAB determinado (apartado) al pulsarlo.

1. Es posible mediante html o javascript?
2. Alguien me podría poner un ejemplo?
3. Gracias.


Ejemplo.
1. Le doy al "boton1", y me muestra el "tab1"
2. Le doy al "boton2", y me muestra el "tab2"


Un amigo me dió unas indicaciones, pero no me acaban de funcionar, cuando doy al botón, no se me abre el tab...
Alguien podría ayudarme?
Muchas gracias.

Hago un copy del código que tengo...

Código HTML:
Ver original
<ul id="tab" class="nav nav-tabs" role="tablist">
<li>
<a id="tab1-tab" aria-controls="tab1" data-toggle="tab" role="tab" href="#tab1" aria-expanded="true">tab1</a>
</li>
<li>
<a id="tab2-tab" aria-controls="tab2" data-toggle="tab" role="tab" href="#tab2" aria-expanded="true">tab2</a>
</li>
<li>
<a id="tab3-tab" aria-controls="tab3" data-toggle="tab" role="tab" href="#tab3" aria-expanded="true">tab3</a>
</li>
</ul>
<div id="tabContent" class="tab-content">
<div id="tab1" class="tab-pane fade" aria-labelledby="profile-tab" role="tab-panel">
Contenido tab1
</div>
<div id="tab2" class="tab-pane fade" aria-labelledby="profile-tab" role="tab-panel">
Contenido tab2
</div>
<div id="tab3" class="tab-pane fade" aria-labelledby="profile-tab" role="tab-panel">
Contenido tab3
</div>
</div>
<div class="buttons-tab-nav">
<a href="#" class="btn btn-default " tab-to-open="tab1">Abrir tab1</a>
<a href="#" class="btn btn-default " tab-to-open="tab2">Abrir tab2</a>
<a href="#" class="btn btn-default " tab-to-open="tab3">Abrir tab3</a>
</div>



Código Javascript:
Ver original
<script type="text/javascript">
var $tabButtons = $('.buttons-tab-nav > a'); // Aquí tenemos almacenados los tres botones a
var $tabsLinks = $("#tab li a"); // Obtenemos todos los tag a que lanzan la apertura de un panel tab
var $tabsPanels = $("#tabContent > div"); // Estos son los paneles que contienen el contenido que están relacionados con cada tab, podemos relacionarlos nosotros mediante el atributo de a aria-controls

// Capturamos el evento click de todos los a(botones)
$tabButtons.on ('click', function (event) {
event.preventDefault();

// Antes de hacer nada, eliminamos la clase active de cualquier elemento a o div que esté dentro de $tabsLinks o $tabsPanels
// es algo drástico y se puede optimizar almacenando en una variable el ultimo elemento activo
// por rapidez lo hago así
$tabsLinks.removeClass("active");
$tabsPanels.removeClass("active");

// Obtenemos el atributo tab-to-open del elemento a que ha sido pulsado.
// Ya tenemos el div que vamos a mostra, en este caso puede ser: tab1, tab2 o tab3
var pressedElement = $(this).attr ('tab-to-open');

// Entonces, ahora solo buscamos el div que tiene ese id y le añadimos la clase active
// y luego, se la añadimos también al elemento a que ha sido pulsado.
// El añadirle ahora la clase al elemento a en vez de hacerlo antes es por hacerlo mas legible el código
$("#" + pressedElement).addClass ("active"); // Activamos pestaña
$("#" + pressedElement + "-tab").addClass ("active"); // Activamos panel de pestaña
});
</script>

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo


Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Jueves 14 Ene 2016 03:21

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Código:

$('#tab3').tab('show');


O mediante propiedades "data" pero no te "ilumina" la pestaña activa:
Código:

<a data-toggle="tab" href="#tab3">Mostrar TAB3</a>


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>--.<--.>-----.--.+++++++.---------.-.>>++.<<-.+++++.-------.<-.>>++.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82



Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Jueves 14 Ene 2016 11:49

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas, soy muy novato, podrías echarme un cable?

A ver, este sería por ejemplo mi tab.

Código:


<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="tabbable" id="tabs-155176">
<ul class="nav nav-tabs">
<li>
<a href="#panel-832037" data-toggle="tab">Section 1</a>
</li>
<li class="active">
<a href="#panel-566127" data-toggle="tab">Section 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="panel-832037">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane active" id="panel-566127">
<p>
Howdy, I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>




y este sería el botón, que me gustaría que fuera al tab "panel-566127", por poner un ejemplo.

Código:

<a href="AQUI LA URL"><button><font color="#cc0000"><strong>AQUI EL TEXTO</strong></font></button>



LA PETICIÓN ES:
- Como debería configurar este botón, para que cuando pulse sobre él, me dirija y me abra el TAB?
- He de incluir alguna secuencia addicional?

Muchas gracias.[/code]

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo


Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Viernes 15 Ene 2016 06:07

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Si lo que quieres es redirigir a otra página y en esa página abrir una pestaña en concreto hasta donde yo se tendrías que contemplarlo en la página hacia donde rediriges... pasando algún argumento por URL o mirando (si el usuario no lo tiene bloqueado) de que página viene...


Si lo que quieres es que dentro de la misma página tener un boton que abra esa pestaña en concreto... harías algo como:

usar <button> es redundante en este caso... y bueno en general si usas bootstrap tienes las clases css "btn btn-x"...
Código:

<a data-toggle="tab" href="#panel-566127" class="btn btn-danger">AQUI EL TEXTO</a>


O algo como esto...
Código:

<a data-open-tab="#panel-566127" href="#" class="btn btn-danger">AQUI EL TEXTO</a>
<script type="text/javascript">
$(document).on('click', 'a', function(ev){
    var $this = $(this);
    if ('open-tab' in $this.data())
    {
      var tabid = $this.data('open-tab');
      $(tabid).tab('show');
      ev.preventDefault();
    }
  });
</script>


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>--.<--.>-----.--.+++++++.---------.-.>>++.<<-.+++++.-------.<-.>>++.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82



Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Viernes 15 Ene 2016 12:03

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

unsigned char* escribió:
Si lo que quieres es redirigir a otra página y en esa página abrir una pestaña en concreto hasta donde yo se tendrías que contemplarlo en la página hacia donde rediriges... pasando algún argumento por URL o mirando (si el usuario no lo tiene bloqueado) de que página viene...


Si lo que quieres es que dentro de la misma página tener un boton que abra esa pestaña en concreto... harías algo como:

usar <button> es redundante en este caso... y bueno en general si usas bootstrap tienes las clases css "btn btn-x"...
Código:

<a data-toggle="tab" href="#panel-566127" class="btn btn-danger">AQUI EL TEXTO</a>


O algo como esto...
Código:

<a data-open-tab="#panel-566127" href="#" class="btn btn-danger">AQUI EL TEXTO</a>
<script type="text/javascript">
$(document).on('click', 'a', function(ev){
    var $this = $(this);
    if ('open-tab' in $this.data())
    {
      var tabid = $this.data('open-tab');
      $(tabid).tab('show');
      ev.preventDefault();
    }
  });
</script>




Buenas,
He probado la primera opción que me has dado:


Código:

<a data-toggle="tab" href="#panel-566127" class="btn btn-danger">AQUI EL TEXTO</a>


Es justo lo que necesito, solo tengo un pequeño problema.
" La Pestaña o TAB de destino, NO SE ILUMINA"
Es decir, sale el texto que tengo en el TAB de destino, pero no se ilumina el título de la pestaña.



Por lo que respecta al código Javascript, no me funciona.
Me sale el botón, le clico, y no hace nada.
He instalado el plugin de javascript para wordpress, y nada, no consigo que haga ninguna acción.

Muchas gracias por tu tiempo.
Saludos.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo


Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Sábado 16 Ene 2016 04:34

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Si, la primera opción no "ilumina" la pestaña seleccionada... la segunda opción igual me equivoque... no probé código xDD

Pero bueno ahora si y... tienes dos opciones:

1. No tienes jQuery cargado al momento de llamar al script:
Código:

   <a onClick="abrirTab('#tabs-155176','#panel-566127')" href="#" class="btn btn-danger">AQUI EL TEXTO</a>

   <script type="text/javascript">
   function abrirTab(tabid, tabref)
   {
      $(tabid+" a[href='"+tabref+"']").tab('show');
   }
   </script>


2. Puedes poner el script después de que cargue jQuery:
Código:

   <a data-open-tab="#tabs-155176" href="#panel-566127" class="btn btn-danger">AQUI EL TEXTO</a>

   <script type="text/javascript">
   $(document).on('click', 'a', function(ev){
       var $this = $(this);
       if ('openTab' in $this.data() && $this.attr('href'))
       {
         var tabid = $this.data('openTab');
         var tabref = $this.attr('href');
         $(tabid+" a[href='"+tabref+"']").tab('show');
         ev.preventDefault();
       }
     });
   </script>


** Si puedes usa la segunda opción Guiño


#tabs-15517 --> es el id que hace referencia al contenedor de los enlaces de las pestañas
#panel-566127 --> es el id de la pestaña en concreto
$(tabid+" a[href='"+tabref+"']") se traduce en $('#tabs-15517 a[href='#panel-566127']") que viene a ser un objeto jQuery que hace referencia al enlace que muestra la pestaña que se quiere mostrar.


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>--.<--.>-----.--.+++++++.---------.-.>>++.<<-.+++++.-------.<-.>>++.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82



Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Miércoles 20 Ene 2016 11:43

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas,
Con la primera forma me ha salido.
Con la segunda no!
Qué debería hacer para que la segunda forma me funcionara?

Por cierto, para no tener que escribir siempre el script, me recomiendas que lo haga en una hoja a parte que se llama scripts.php, y de esta forma al inicio de cada página cargue todos los scripts de golpe? con un include.

Gracias!!!

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 2 Horas

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Python abrir sin darle al start

Sergi99 Python 0 Lunes 20 May 2019 10:54 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Boton JS no funciona en blogguer

NrsctR Java Web 5 Sábado 29 Abr 2017 02:55 Ver último mensaje
El foro no contiene ningún mensaje nuevo

[Linux] Abrir url en navegador por defecto

unsigned char* C, C#, Visual C++ 3 Jueves 20 Ago 2015 00:25 Ver último mensaje
El foro no contiene ningún mensaje nuevo

webbrowser click boton

xra Visual Basic y VBA 1 Sábado 06 Jun 2015 22:17 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Duda sobre reenviar formulario a dos páginas de...

Aneeh PHP 2 Miércoles 20 May 2015 11:02 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,