jQuery Tabs Plugin

Las pestañas (tabs) son un elemento bastante común. Existen varias implementaciones de este elemento en Internet. Pero a menudo las pestañas (tabs) están sobrecargadas con código lleno de efectos que es poco probable que se necesiten en las tareas habituales. Por lo tanto, se decidió escribir pestañas simples, por así decirlo, “para mí”.

Este plugin fue escrito hace mucho tiempo y lo usé en mi trabajo. Actualmente, jQuery no se considera una solución moderna, pero hay muchos proyectos en los que aún se usa esta biblioteca. Quizás este plugin para pestañas (tabs) le resulte útil a alguien. Está claro que para que plugin funcione, jQuery debe estar conectado en el proyecto.

En uno de los artículos anteriores, vimos cómo escribir un plugin jQuery de manera general. Ahora veamos un ejemplo más específico.

HTML

<div class="tabs">
     <div class="tabs__head">
          <div class="tabs__name active">Tab 1</div>
          <div class="tabs__name">Tab 2</div>
          <div class="tabs__name">Tab 3</div>
     </div>
     <div class="tabs__body">
          <div class="tabs__cont active">
               1. Contents of the first tab
          </div>
          <div class="tabs__cont">
               2. Contents of the second tab
          </div>
          <div class="tabs__cont">
               3. Contents of the third tab
          </div>
     </div>
</div>

CSS

/* required styles */
.tabs__cont {
     display: none; /* hide contents of the tabs*/
}
.tabs__cont.active {
     display: block; /*display contents of the active tab*/
}

Tenga en cuenta: si cambia el nombre de la clase activa, también deberá cambiar el código CSS.

Inicialización

//init plugin
$(() => {
  
  $('.tabs').simpleTabs();
  
});

También puedes utilizar otros selectores en lugar de los predeterminados. Es posible llamar a una devolución de llamada al hacer clic.

Inicialización con opciones

$(() => {
  
   $('.tabs').simpleTabs({
     title: '.othernametab', // tab title selector
     content: '.othercontenttab', // tab content selector
     cb: callbackFunction // callback function
     activeClass: 'show'
   });
  
});

Código plugin

$.fn.simpleTabs = function (options) {

  const settings = $.extend({
    title : '.tabs__name', 
    content: '.tabs__cont',
    activeClass: 'active',
    cb: ''
  }, options);

  const tabName = $(this).find(settings.title), // tab title selector
        tabCont = $(this).find(settings.content), // tab content selector
        callback = settings.cb,
        tabsEl = this;

  tabName.on('click', function () {
    const active = $(this).hasClass(settings.activeClass); // is the tab title active?

    if (!active) {
      const i = $(this).index();
      const activeEls = $(tabsEl).find(`.${settings.activeClass}`);
      activeEls.each(function(){
        $(this).removeClass(settings.activeClass);
      });

      $(this).addClass(settings.activeClass);
      tabCont.eq(i).addClass(settings.activeClass);

      if (callback) {
        callback();
      }
    }
  });
};

Puedes ver un ejemplo del uso plugin jQuery en Codepen: https://codepen.io/igorrybalko/pen/xbKVmOz