Как сделать вкладки с табами в Zero Block на Tilda?

Модификация поможет сделать свои вкладки на Zero Block и переключать их при помощи кнопок. Можно создавать ссылки которые будут сразу открывать указанные вкладки

Модификация не работает с включенным Autoscale в блоках

Модификация работает только с Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

id Zero Block через запятую

Ссылка для табов

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

КОПИРОВАТЬ КОД

<script> $(document).ready(function() { let carousel = true; let screens = [ { min: 0, max: 10000, active: true }, ]; let debug = false; let script = '[TICODE-TABS]: '; let active = true; let slides = '#rec511683601, #rec511683658'; let pagination = '#tc-tabs'; let arBlocks = slides.split(','); let current = 0; init(); $(document).on('click', '[href*="' + pagination + '"]', function(event) { event.preventDefault(); if (false === active) return null; let index = parseInt($(this).attr('href').replace(pagination, ''), 10); if (!isNaN(index)) { current = index - 1; slide(current); } }); function init() { log('Скрипт запущен'); checkScreen(); if (false === active) return null; let slideNumber = getSlideNumberFromHash(); if (slideNumber !== null) { current = slideNumber - 1; } setTimeout(function() { reloadAnimation(current); hideAllSlides(); showSlide(current); }, 100); } function checkScreen() { let width = $(window).width(); screens.forEach(function(item, i, arr) { if (width > item.min && width <= item.max) active = item.active; }); } function slideNext() { if (false === active) return null; if (current + 1 === arBlocks.length && carousel === true) { current = -1; } if (current + 1 < arBlocks.length) { current++; slide(current); } } function slidePrev() { if (false === active) return null; if (current === 0 && carousel === true) { current = arBlocks.length; } if (current - 1 >= 0) { current--; slide(current); } } function slide(n) { setTimeout(function() { reloadAnimation(n); hideAllSlides(); showSlide(n); updateHash(n + 1); }, 100); } function hideAllSlides() { arBlocks.forEach(function(item, i, arr) { hide($(item)); }); } function showSlide(n) { show($(arBlocks[n])); if ("y" === window.lazy) { t_lazyload_update(); } if (typeof t_slds_updateSlider != "undefined") { let idPart = arBlocks[n].replace('#rec', ''); t_slds_updateSlider(idPart); } } function reloadAnimation(n) { $current = $(arBlocks[n]); arBlocks.forEach(function(item, i, arr) { $(item).find('.t396__elem').each(function(i, e) { $(this).removeClass('t-sbs-anim_started t-animate_started'); }); }); $current.find('.t396__elem').each(function(i, e) { $(this).addClass('t-sbs-anim_started t-animate_started'); }); arBlocks.forEach(function(item, i, arr) { $(item).find('.t396__elem[data-animate-style]').each(function(i, e) { $(this).removeClass('t-animate_started'); }); }); setTimeout(function() { $current.find('.t396__elem[data-animate-style]').each(function(i, e) { $(this).addClass('t-animate_started'); }); }, 100); } function hide($element) { $element.css({ 'display': 'none' }); log('Скрыт элемент ticode' + $element.attr('id')); } function show($element) { $element.css({ 'display': 'block' }); log('Показан элемент ticode' + $element.attr('id')); } function log(message) { if (debug) console.log(script + message); } function getSlideNumberFromHash() { let hash = window.location.hash; if (hash && hash.indexOf('#tc-tabs') === 0) { let slideNumber = parseInt(hash.replace('#tc-tabs', ''), 10); if (!isNaN(slideNumber) && slideNumber >= 1 && slideNumber <= arBlocks.length) { return slideNumber; } } return null; } function updateHash(slideNumber) { window.location.hash = '#tc-tabs' + slideNumber; } }); </script>

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем Zero Block и добавляем в него кнопки для переключения вкладок. Назначаем ссылки кнопкам #tc-tabs + порядковый номер
Например если планируете всего 3 вкладки, то добавляете три кнопки с ссылками #tc-tabs1, #tc-tabs2, #tc-tabs3

2. Дублируем Zero Block столько раз сколько вам нужно вкладок и меняем в блоке основной контент. Кнопки переключения оставляем.

3. Копируем id всех Zero Block и указываем их в генераторе через запятую.

4. Копируем сгенерированный код и вставляем в HTML блок Т123

Примечание! При переходе на страницу с табами, можно указать вкладку которую нужно открыть. Для этого достаточно в ссылке дописать название и номер таба. Например была ссылка на сайт https//ticode.dev, стала https//ticode.dev/#tc-tabs3. При переходе будет открыт третий таб.