YOUX agency

Как добавить табы Тильда v.2 . Переключение нескольких зеро блок

Данный код помогает переключать несколько зеро блоков на странице при нажатии на свои кнопки. Обновленный, простой и 100% рабочий способ

Заказать код
Вступить в чат
Предложить код
Видео-урок
таб1
таб2
таб3
таб4
таб5

Инструкция

1

Создайте кнопки и присвойте каждой класс .tab-btn

2

Вставьте ссылки в каждую кнопку #tab1, #tab2, #tab3 и так далее

3

Создайте свои zero-блок и присвойте им классы .uc-tab1, .uc-tab2, .uc-tab3 и тд.

4

Вставьте код на страницу

в блок "Другое" - Т123

5

Измените цвет #ff005a активной

вкладки на свой

Код скопирован
Код для вставки

<!-- Код для переключения между вкладками v.2 -->
 <!-- https://youx.agency/sozdaem-blok-s-tabami-pereklyuchenie-neskolkih-zero-block-cherez-knopki -->


<style>


.my-active-class {
background: #ff005a !important;
}

</style>



<script>

    // Скрыть все вкладки, кроме первой
    $('[class*="uc-tab"]').not('.uc-tab1').fadeOut(0);

    // Добавить класс "bactive" для первой вкладки
    $('[href="#tab1"]').addClass('my-active-class');

    // Обработчик события для клика по кнопкам вкладок
    $('.tab-btn a').click(function() {
    // Убрать класс "bactive" у всех кнопок
    $('.tab-btn a').removeClass('my-active-class');

    // Добавить класс "my-active-class" к кнопке, по которой кликнули
    $(this).addClass('my-active-class');

    // Получить идентификатор вкладки из атрибута href кнопки
    var slide = $(this).attr('href').slice(1);

    // Скрыть все вкладки
    $('[class*="uc-tab"]').fadeOut(0);

    // Показать вкладку с идентификатором, соответствующим кнопке
    $('.uc-' + slide + '').fadeIn(0); 
    t_lazyload_update();
    
});

</script>

Другие модификации