Bootstrap, link to tabs

[raulgs82]

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"


Hago un copiar y pegar del código genérico...

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

[kraneok]

Hola. Desde mi punto de vista esto no tiene sentido, ya que las tab propiamente hacen esta función, es decir, cuando pulsas en cada tab se muestra.

Para hacerlo como lo necesitas lo primero que debes saber es que el componente de Bootstrap añade la clase .active tanto al elemento <li> (que es el título de la pestaña) como al div con el que está relacionada esa pestaña.

Código HTML:

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

Código Javascript:

<script type="text/javascript">
    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(tabs)
        $tabsLinks.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 aria-controls 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 ('aria-controls');
 
            // 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");
            $(this).addClass("active");
        });
</script>
 

[raulgs82]

Me quedo sorprendido con la pronta respuesta, gracias.

Es correcto, busco justamente lo que que comentas, hacer un link al tab a partir de un botón.

Soy muy novato, por ejemplo este sería mi botón normal:
<a href="AQUI LA URL"><button><font color="#cc0000"><strong>AQUI EL TEXTO</strong></font></button>


Como quedaría dicho botón, si cuando pulsaras, fueras al tab2 ?
que siguiendo mi ejemplo sería el "#panel-566127"


Podrías fusionarlo?
Ya que a partir de tu explicación me lio un poco.
He hecho algunas pruebas con lo que comentas, pero no logro que funcione.

Soy muy novato, pido mil disculpas.
Gracias!!!!

[kraneok]

Bien, entendido lo anterior empezamos otra cosa.

Ahora tenemos tres botones que son los que abren los paneles, en vez de las tabs por defecto de Bootrap.

Así que ahora tenemos tres botones dentro de un div.

Código HTML:

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

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

[raulgs82]

Buenas, he probado de copiar y pegarlo en mi página.
Salen los 3 botones y los 3 tabs.

Pero cuando clico en los botones, no se abren los tabs...

[kraneok]

Te lo he escrito a pelo sin probarlo. Debería abrir consola y ver que está fallando, así aprenderías como funciona.

Saludos!

[raulgs82]

Bufff, me estoy volviendo loco xDDD jeje, probando la he liado más, no lo consigo.
De todas, formas, gracias por todo el código.
Si algún día te puedes entretener en buscar el error, me harías un gran favor.

Muchas gracias,
Saludos.

[raulgs82]

Parse error: syntax error, unexpected ‘<‘ in /homepages/14/d603398986/htdocs/wp-content/plugins/insert-php/insert_php.php(48) : eval()’d code on line 2

He probado de poner código php y lo ejecuta correctamente.
El plugin no es.