Узнать стоимость проекта

Код помогает вывести 2 ряда табов и переключать зеро блоки еще сложнее, круче, больше, ехааааа. Мучайтесь

Да, это двойные табы для переключения зеро-блоков

Заказать код
Вступить в чат
Поблагодарить
Видео-урок

Инструкция

Создайте кнопки в зеро-блок с классами .tab-btn и ссылками #tab1, #tab2

Новый zero-блок с кнопками и им классы .tab-tab, ссылки в них #tab-1, #tab-2 и тд.

Новый zero-блок с кнопками и им классы .tab-bab, ссылки в них #tar-1, #tar-2 и тд.

Далее добавьте ваши зеро-блоки с основным контентом и им классы .uc-tar1, uc-tar-2 для второго ряда табов uc-tab1, .uc-tab2 для первого и т.д.

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

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

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

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

Код скопирован
Код для вставки
<style>
/* Стили для активной вкладки (фон + белый текст постоянно) */
.my-active-class {
    background: #4a535e !important;
    color: #ffffff !important; /* если кнопка сама имеет цвет текста */
}

/* Важно: белый текст внутри кнопки у активной вкладки */
.my-active-class .tn-atom__button-text {
    color: #ffffff !important;
}

/* При нажатии (удержании) — текст становится белым у ЛЮБОЙ кнопки */
.tn-atom__button-text:active,
.tab-btn a:active .tn-atom__button-text,
.tab-bab a:active .tn-atom__button-text {
    color: #ffffff !important;
}

/* Исходный цвет текста для всех кнопок (если неактивны и без нажатия) */
.tn-atom__button-text {
    color: #121212; /* или какой у тебя по умолчанию */
    transition: color var(--t396-speedhover, 0s) ease-in-out;
}

/* Опционально: плавный переход только для цвета текста */
.tab-btn a,
.tab-bab a {
    transition: background 0.3s ease, color 0.3s ease;
}
</style>

<script>
$(() => {
    const showFirstLine = () => {
        $('.tab-bab a').removeClass('my-active-class');
        $('[class*="uc-tab"]').show();
        $('[class*="uc-tab"],[class*="uc-tar"]')
            .not('.uc-tab, .uc-tab1')
            .fadeOut(0);
        $("[href='#tab-1']").addClass('my-active-class');
        $("[href='#tab1']").addClass('my-active-class');
    };

    const showSecondLine = () => {
        $('.tab-bar a').removeClass('my-active-class');
        $('[class*="uc-tar"]').show();
        $('[class*="uc-tar"],[class*="uc-tab"]')
            .not('.uc-tar, .uc-tar1')
            .fadeOut(0);
        $("[href='#tar-1']").addClass('my-active-class');
        $("[href='#tab2']").addClass('my-active-class');
    };

    $('.tab-btn a').click(({ currentTarget }) => {
        $('.tab-btn a').removeClass('my-active-class');
        $(currentTarget).addClass('my-active-class');
        var slide = $(currentTarget).attr('href').slice(1);
        switch (slide) {
            case 'tab1':
                showFirstLine();
                break;
            case 'tab2':
                showSecondLine();
        }
    });

    $('.uc-tab .tab-bab a').click(({ currentTarget }) => {
        $('.tab-bab a').removeClass('my-active-class');
        const number = parseInt(
            $(currentTarget)
                .addClass('my-active-class')
                .attr('href')
                .slice(-1)
        );
        $('[class*="uc-tab"]').not('.uc-tab').hide();
        $(`[class*="uc-tab${number}"]`).show();
    });

    $('.uc-tar .tab-bab a').click(({ currentTarget }) => {
        $('.tab-bab a').removeClass('my-active-class');
        const number = parseInt(
            $(currentTarget)
                .addClass('my-active-class')
                .attr('href')
                .slice(-1)
        );
        $('[class*="uc-tar"]').not('.uc-tar').hide();
        $(`[class*="uc-tar${number}"]`).show();
    });

    showFirstLine();
});
</script>

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

Made on
Tilda