Tilda Hacks: Создаем кастомные табы в Zero Block с помощью Autolayout и JS

Название: Гибкие табы в Tilda: Связываем Zero Block и контентные блоки через Autolayout

В этом гайде:

• Пошаговая настройка кнопок-групп в Zero Block.
• Готовый JS-скрипт для переключения блоков по ID.
• Лайфхаки по стилизации активных вкладок (скругление, цвет, шрифты).
• Оптимизация под мобильные устройства и Lazy Load.

Шаг 1. Подготовка контента

Шаг 2. Создание кнопок в Zero Block (настройка вкладок)

Шаг 3.Установка «мозгов»: Добавляем блок Т123

<style>
/* Скрываем контентные блоки (кроме первого таба) при загрузке страницы */
/* Перечислите здесь ID всех блоков из табов 2, 3 и т.д. через запятую */
#123456789, #rec123456789, #123456789, #r123456789 {
display: none !important;
}

/* Стили для АКТИВНОЙ кнопки */
.my-tab-active .tn-group__item,
.my-tab-active {
background-color: #1C3964 !important; /* Цвет фона активного таба */
border-color: #1C3964 !important;
border-radius: 30px !important;
transition: all 0.3s ease;
}

/* Цвет текста в активной кнопке */
.my-tab-active .tn-atom,
.my-tab-active div,
.my-tab-active span {
color: #ffffff !important;
}
</style>

<script>
(function() {
// НАСТРОЙКИ: Привяжите ID блоков к ссылкам кнопок
const tabGroups = {
'#tab1': ['123456789', '123456789'], // Блоки первой вкладки
'#tab2': ['123456789', '123456789'], // Блоки второй вкладки
'#tab3': ['123456789', '123456789'] // И так далее...
};

const allBlocks = Object.values(tabGroups).flat();

function updateTabs(hash) {
if (!tabGroups[hash]) return;

// Скрываем все блоки из списка
allBlocks.forEach(id => {
const el = document.querySelector(id);
if (el) el.style.setProperty('display', 'none', 'important');
});

// Показываем блоки активной вкладки
tabGroups[hash].forEach(id => {
const el = document.querySelector(id);
if (el) el.style.setProperty('display', 'block', 'important');
});

// Обновляем визуальное состояние кнопок
document.querySelectorAll('.my-tab-btn').forEach(btn => {
btn.classList.remove('my-tab-active');
const linkInBtn = btn.querySelector('a');
const href = linkInBtn ? linkInBtn.getAttribute('href') : btn.getAttribute('href');
if (href === hash) btn.classList.add('my-tab-active');
});

// Обновляем Tilda (анимации и lazy load)
window.dispatchEvent(new Event('resize'));
if (typeof t_lazyload_update === 'function') t_lazyload_update();
}

// Слушатель кликов
document.addEventListener('click', function(e) {
const btn = e.target.closest('.my-tab-btn');
if (!btn) return;

const link = btn.querySelector('a') || (btn.tagName === 'A' ? btn : null);
if (link) {
const href = link.getAttribute('href');
if (href && href.startsWith('#tab')) {
e.preventDefault();
updateTabs(href);
}
}
}, true);

// Активация первой вкладки при загрузке
window.addEventListener('load', () => updateTabs('#tab1'));
})();
</script>

4. Стилизация активного состояния

5. Проверка и тесты

Итог: Теперь вы не ограничены стандартными блоками Tilda и можете создавать интерфейсы любого уровня сложности!