Nov 8, 2023 | Freemium

Cómo crear una navegación por tabs para mostrar contenido con divi y sin plugins

Cerrar video

La navegación por pestañas es una forma eficaz de organizar y mostrar contenido en una página web. Con Divi, puedes crear fácilmente una navegación por pestañas sin necesidad de plugins adicionales.

En este artículo, te mostraré cómo crear una navegación por pestañas para mostrar contenido con Divi y sin plugins.

1. Funcionalidad

<script>
jQuery(document).ready(function($) {
  $("[class*='ui-padre']").each(function() {
    const parentClass = $(this).attr('class');
    const number = parentClass.match(/ui-padre(\d+)/);
    if (number) {
      const childSelector = `.ui-into${number[1]}`;
      const $child = $(childSelector);
      if ($child.length > 0) {
        $(this).append($child);
      }
    }
  });
});
</script>

<script>
jQuery(document).ready(function($) {
  // Oculta todos los divs de la columna derecha excepto el primero
  $('.ui-padre1').show().siblings().hide();
  $('[class*="ui-tab"]').click(function() {
    var classes = $(this).attr('class').split(' ');
    var tabClass = classes.filter(function(cls) {
      return cls.startsWith('ui-tab');
    })[0];

    var selector1 = tabClass.replace('ui-tab', 'ui-padre');
    var $info = $('.' + selector1);

    // Aplicar un efecto de fade con una duración de 500 milisegundos
    $info.fadeIn(500).siblings('[class*="ui-padre"]').hide();

    $('[class*="ui-tab"]').removeClass("ui-tab-activa");
    $(this).addClass('ui-tab-activa');
  });
});
</script>

<script>
jQuery(document).ready(function($) {
  // Encuentra todos los divs con la clase "swiper mySwiper"
  var $swiperDivs = $(".swiper.uiSwiper");

  $swiperDivs.each(function() {
    var $this = $(this);

    // Crea un nuevo div con la clase "swiper-scrollbar"
    var $swiperScrollbar = $('<div class="swiper-scrollbar"></div>');

    // Agrega el div "swiper-scrollbar" al final del div "swiper mySwiper"
    $this.append($swiperScrollbar);
  });

  $('.uiSwiper').each(function() {
    // Añade el div `swiper-button-next`
    $(this).append('<div class="swiper-button-next"></div');

    // Añade el div `swiper-button-prev`
    $(this).append('<div class="swiper-button-prev"></div');
  });
});
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
jQuery(document).ready(function($) {
  var swiper = new Swiper(".uiSwiper", {
    slidesPerView: "auto",
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      type: "fraction",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    scrollbar: {
      el: ".swiper-scrollbar",
      hide: false,
    },
  });
});
</script>

2. Estilos css

.ui-tab-activa {
  background: #f2f5fd;
        border-color: #bbcfe9!important;
  transition: 0.01s;
  border: 1px solid;
}

/* TEXTO */
.et_pb_blurb.ui-tab-activa h2.et_pb_module_header {
      color: #224bec!important;
}

/* ICONO */
.ui-tab-activa .et-pb-icon {
      color: #224bec!important;
}

/*arrows del carrusel*/
.swiper-button-next, .swiper-button-prev {
  background: #dfe9fc;
  color: #224bec;
  border-radius: 100px;
  width: 45px;
  height: 45px;
    transition: 0.3s;

}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background: #2641d9;
 color: #fff;
  transition: 0.3s;
}



.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 20px;
 font-weight: 900;
}

/* responsive */
@media (max-width: 980px) {
  .ui-flex {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

}

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hola, soy Fer!

Por el momento no estoy aceptando nuevos trabajos, gracias por tu comprensión.