Создайте кнопки в зеро-блок с классами .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;
}
</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>