Bootstrap, link to tabs

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