October 12, 2022

Как сделать табы в Zero block

Для того, чтобы сделать те самые переключатели в блоках через zero block:

Нужно создать столько Zero блоков, сколько вам нужно переключателей, у меня их 5, например

в каждом свой контент, но должно быть понятно, что можно нажать на переключатели

Но не спешите создавать сразу все блоки, в первом блоке сразу поставьте кнопочкам в URL хэштеги «#slide1», «#slide2», «#slide3» и так далее..., как показано ниже

Далее вставляем следующий код и вставляем его в блок T123:

Копируйте внимательно, так как ссылки на источник у меня уже нет

<style>
.posAnsld{
position : absolute;
width:100%;
top:0;
}
.outAnth{
opacity:0;
z-index:-1;
}

.allzeroslides{ position: relative}
.paginbtn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
</style>

<script>
$( document ).ready(function() {
//ID Zero
var sbZero = [
'#rec499184717',
'#rec500785035',
'#rec500785228',
'#rec500785313',
'#rec500785511'

];
//Добавляем классы к блокам
$.each(sbZero, function(index,value) {
$(sbZero[index]).addClass('piecezeroslides');
});
$('.piecezeroslides:not(:first)').addClass('outAnth posAnsld');
//Добавляем общие классы
$('.piecezeroslides').wrapAll('<div class="allzeroslides"></div>');
//Присваиваем класс нашим кнопкам
$('a[href^="#slide"]').addClass("paginbtn");
//При клике на кнопку
$('.paginbtn').click(function(e) {e.preventDefault();
$('.paginbtn').removeClass('actbtnZ');$(this).addClass('actbtnZ');
var btnNum = Number.parseInt( $(this).attr('href').substring(6));
$('.allzeroslides').height($(sbZero[btnNum-1]).height());
$('.piecezeroslides').addClass('outAnth');
$(sbZero[btnNum-1]).removeClass('outAnth');
});
$(window).resize(function() { setTimeout(function(){ $('.actbtnZ').click();}, 2000);});
});
</script>

И нам нужно будет поменять следующие хэштеги блоков:

Как можно было догадаться, это хэштеги наших Zero блоков, скопировать их можно из настроек сайта и вставить между одинарными кавычками:

После последнего хэштега, запятая не нужна

Затем, сохраняем, публикуем и готово!

Как работает на примере: http://urrsunn.tilda.ws/page30838353.html