сами вкладки из стандартных или zero блоков

Вкладки с любыми управляющими элементами

1. Создай в зероблоке нужное количество кнопок\шейпов\того, что будет табами в таком порядке, в каком будет переключение (т.е. первый созданный элемент будет открывать первый таб, второй - второй и тд.)

2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (см. Важно↓)

3. Укажи порядковый номер табов на странице

4. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер (см. Важно↓)

5. Измени в коде ID скрываемых блоков (rec123456789). Скопируй код и вставь в блок т123

Важно!- Обрати внимание, что класс для табов и кнопок переключения меняется в зависимости от порядкового номера табов на странице. Порядковый номер для табов приписывается к классу (tabbtn1 - для всех первых табов на странице, tabbtn2 для всех вторых и тд.), а у кнопок переключения (стрелочки) ставится в середине класса (tab1prev и tab1next у всех кнопок первых табов, tab2prev и tab2next у всех кнопок вторых табов и тд).

- Модификация не совместима с basic animation в переключаемых табами Zero

Код №1

<script>
var blocks1 = ["#rec123456789","#rec987654321"]; /*измени на свои ID блоков*/
var buttons1 = document.querySelectorAll('.tabbtn1');
for (var i=0; i < buttons1.length; i++) {
buttons1[i].setAttribute('num', [i])
buttons1[i].setAttribute('onclick', 'show1(this)')
function show1(e) {
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
buttons1.forEach(element => {
$(element).removeClass('v-activebtn1')
})
$(e).addClass('v-activebtn1')
$($(blocks1[e.attributes.num.value])).removeClass('hidetab')
t_lazyload_update()
}
}
$(document).ready(function() {setTimeout(() =>{

blocks1.forEach(element => {
$(element).addClass('hidetab')
})
$(blocks1[0]).removeClass('hidetab')
$(buttons1[0]).addClass('v-activebtn1')
}, 500)})</script>
<style>
.tabbtn1 {
cursor: pointer;
}
.v-activebtn1 .tn-atom {
}
.hidetab {
display: none !important;
}

</style>

Код №1.1

<script>
var blocks1 = ["#rec580745423","#rec580749466","#rec580753362 "];
var buttons1 = document.querySelectorAll('.tabbtn1');
for (var i=0; i < buttons1.length; i++) {
buttons1[i].setAttribute('num', [i])
buttons1[i].setAttribute('onclick', 'show1(this)')
function show1(e) {
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
buttons1.forEach(element => {
$(element).removeClass('v-activebtn1')
})
$(e).addClass('v-activebtn1')
$($(blocks1[e.attributes.num.value])).removeClass('hidetab')
if (typeof t_lazyload_update !== "undefined") {
t_lazyload_update()
}
window.dispatchEvent( new Event("resize"))
}
}
$(document).ready(function() {setTimeout(() =>{

blocks1.forEach(element => {
$(element).addClass('hidetab')
})
$(blocks1[0]).removeClass('hidetab')
$(buttons1[0]).addClass('v-activebtn1')
}, 500)})</script>
<style>
.tabbtn1 {
cursor: pointer;
}
.v-activebtn1 .tn-atom {
}
.hidetab {
display: none !important;
}

</style>

если на мобильных медленно грузит фото

Код №2

<script>
var blocks1 = ["#rec123456789","#rec987654321"];
var buttons1 = document.querySelectorAll('.tabbtn1');
for (var i=0; i < buttons1.length; i++) {
buttons1[i].setAttribute('num', [i])
buttons1[i].setAttribute('onclick', 'show1(this)')
function show1(e) {
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
buttons1.forEach(element => {
$(element).removeClass('v-activebtn1')
})
$(e).addClass('v-activebtn1')
$($(blocks1[e.attributes.num.value])).removeClass('hidetab')
t_lazyload_update()
}
}
$(document).ready(function() {setTimeout(() =>{
$('.tab1next').click(function() { if ($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0]) } }); $('.tab1prev').click(function() { if ($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0]) } });$('.tab1next').css('cursor','pointer');$('.tab1next').css('cursor','pointer');$('.tab1prev').css('cursor','pointer')
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
$(blocks1[0]).removeClass('hidetab')
$(buttons1[0]).addClass('v-activebtn1')
}, 500)})</script>
<style>
.tabbtn1 {
cursor: pointer;
}
.v-activebtn1 .tn-atom {
}
.hidetab {
display: none !important;
}

</style>

с переключением табов кнопками/стрелочками

Код №2.1 если моб. долго грузится

<script>
var blocks1 = ["#rec123456789","#rec987654321"];
var buttons1 = document.querySelectorAll('.tabbtn1');
for (var i=0; i < buttons1.length; i++) {
buttons1[i].setAttribute('num', [i])
buttons1[i].setAttribute('onclick', 'show1(this)')
function show1(e) {
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
buttons1.forEach(element => {
$(element).removeClass('v-activebtn1')
})
$(e).addClass('v-activebtn1')
$($(blocks1[e.attributes.num.value])).removeClass('hidetab')
if (typeof t_lazyload_update !== "undefined") {
t_lazyload_update()
}
window.dispatchEvent( new Event("resize"))
}
}
$(document).ready(function() {setTimeout(() =>{
$('.tab1next').click(function() { if ($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').nextAll('.tabbtn1:first')[0]) } }); $('.tab1prev').click(function() { if ($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0] !== undefined){ show1($('.tabbtn1.v-activebtn1').prevAll('.tabbtn1:first')[0]) } });$('.tab1next').css('cursor','pointer');$('.tab1next').css('cursor','pointer');$('.tab1prev').css('cursor','pointer')
blocks1.forEach(element => {
$(element).addClass('hidetab')
})
$(blocks1[0]).removeClass('hidetab')
$(buttons1[0]).addClass('v-activebtn1')
}, 500)})</script>
<style>
.tabbtn1 {
cursor: pointer;
}
.v-activebtn1 .tn-atom {
}
.hidetab {
display: none !important;
}

</style>

с переключением табов кнопками/стрелочками

ПРИМЕР