Creando unas tabs funcionales sin JQuery, a lo vanilla

Este post es un ejercicio muy sencillo que os puede ayudar a crear un sistema estándar de tabs sin tener que usar JQuery. Porque, como sabréis, JQuery es una buena librería pero como librería que es tiene un gravísimo problema (como ella y todas) y es que es una caja cerrada.

Una caja cerrada no os permite «ver» lo que pasa dentro (si, podéis ver el código fuente de JQuery) y que, por lo tanto, puede hacer tantas cosas indirectamente que puede suponer una alta carga para los equipos. Ademas, aunque no os lo creáis, debido a que JQuery se ha convertido en un must en muchas webs muchas de sus peculiaridades se han incorporado directamente en Javascript.

Empecemos por lo básico. Que han de cumplir nuestras tabs.

Sencillamente nuestra tabs son un sistema donde tenemos una serie de enlaces que cambian un contenido inferior según pulsemos sobre uno u otro enlace. Ademas, han de cumplir que se puedan poner más de una en la misma página sin que entre ellas interfieran. Vamos, lo básico. Por ello veamos el HTML con un ejemplo de tres tabs.

[code]

[/code]

Como vemos hemos creado un elemento contenedor que tendra un identificador (para por si hay más de una) dividido en dos zonas. Un ul donde pondremos los enlaces a las tabs y un div contenedor del contenido dividido en tantos divs como tabs haya. Observamos que en los li hacemos una referencia en el enlace al identificador de la tab del contenido. Algo muy simple y nada que contar nuevo.

function Create_Events_Tab(id_element) {
  // Funcion para el funcionamiento de los tabs
  // id_element: identificador del elemento tab
  var tabs = document.querySelectorAll('.'+id_element+' ul li');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(event) {
      for (var i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
      }
      var clickedTab = event.currentTarget;
      clickedTab.classList.add('active');
      event.preventDefault();

      var mycontentPanes = document.querySelectorAll('.'+id_element+' .contenido div');
      for (i = 0; i < mycontentPanes.length; i++) {
        mycontentPanes[i].classList.remove('active');
      }
      var anchorReference = event.target;
      var activePanedId = anchorReference.getAttribute('href');
      var activePane = document.querySelector('.'+id_element+' '+activePanedId);
      activePane.classList.add('active');
    });
  }
}

Donde, como veis, hemos creado una única función que añade un handler de evento al enlace que lo que hace es quitar el estilo active de todos y ponerlo donde corresponde.

Es decir, la forma de proceder es muy sencilla, localizar todas las tabs con .querySelectorAll que devuelve un objeto DOM con todo lo que haya bajo este y que el parámetro es igual que en JQuery para buscar en el DOM, recorrerles quitando el css "active" con la propiedad classList (que tiene varios métodos para añadir -add-, ver, eliminar -remove- alguno o todos los estilos) y, repetir lo mismo en la zona de content a sabiendas, como hemos hecho, que sacamos a donde apunta el enlace gracias al evento en si y sus propiedades (el target del evento) y a su referencia (su atributo href).

Y listo, funcionando.

¿Y que ventaja tiene todo esto?. Pues prácticamente que aparte de haberlo hecho nosotros y comprender un poco más de las especificación nueva de Javascript (y que vemos que tampoco es tan grande lo que ocupa), al estar usando implementaciones directas del navegador esto va "como un tiro" comparado con hacerlo via JQuery. De hecho, tarda 0,120 ms en comparación con los 2 ms que puede tardar lo mismo en JQuery.

Vale que son tiempos realmente absurdos, pero en una web todo cuenta. Y estas cosas solo se consiguen programando a pelo o "a lo vanilla".

Como desventajas es que no funciona en todos los navegadores, obviamente, que es justo la ventaja de JQuery (aunque también este eliminando soporte para IE 9 hacia abajo -y con razón-). Con lo que lo comido por lo servido.

Por cierto, se me olvidaba, como es una función hay que llamarla en algún momento para que funcione con el identificador del grupo de tabs 🙂

[code]
Create_Events_Tab('identificador123');
[/code]