Bootstrap, link to tabs

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