Название: Гибкие табы в Tilda: Связываем Zero Block и контентные блоки через Autolayout
В этом гайде:
- Пошаговая настройка кнопок-групп в Zero Block.
- Готовый JS-скрипт для переключения блоков по ID.
- Лайфхаки по стилизации активных вкладок (скругление, цвет, шрифты).
- Оптимизация под мобильные устройства и Lazy Load.
Многие дизайнеры сталкиваются с тем, что стандартный блок вкладок (ME602) ограничивает дизайн. Мы хотим, чтобы кнопки были уникальными, находились в Zero Block и управляли контентом по всей странице. В этом гайде я покажу, как это реализовать с помощью Autolayout и небольшого скрипта.
Шаг 1. Подготовка контента
Создайте на странице блоки, которые должны переключаться. Это могут быть как Zero Block, так и стандартные блоки.
- Зайдите в Настройки каждого блока и скопируйте его ID (например, #rec123456789).
- Выпишите эти ID, сгруппировав их по вкладкам.
Шаг 2. Создание кнопок в Zero Block (настройка вкладок)
- Создайте текстовый элемент для названия вкладки.
- Выделите текст и превратите его в группу (Right Click -> Group).
- В правой панели настроек включите Autolayout. Настройте цвет группы, отступы, обводку и скругление (например, 30px).
- Важно: В поле CSS Class Name для каждой такой группы пропишите my-tab-btn.
- В поле URL (ссылка) пропишите якоря: #tab1 для первой кнопки, #tab2 для второй и так далее.
Шаг 3.Установка «мозгов»: Добавляем блок Т123
Чтобы магия заработала, нам нужен скрипт. Он сделает три вещи: скроет лишнее, подсветит активную кнопку и покажет нужный контент.
- Добавьте блок Т123 в самый низ страницы.
- Скопируйте и вставьте код (код берем из нашей переписки выше).
- В начале кода не забудьте перечислить ID ваших блоков в соответствующих группах.
<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>
Почему это решение лучше стандартного?
- Гибкость: Можно использовать Autolayout, группировку и любые элементы внутри кнопок.
- Скорость: Код написан на чистом JavaScript (без jQuery), что обеспечивает мгновенную работу.
- SEO и адаптив: Блоки физически присутствуют на странице, что полезно для поисковиков, а переключение работает корректно на мобильных устройствах.
4. Стилизация активного состояния
Чтобы пользователь понимал, какая вкладка выбрана, мы добавили в код CSS-стили. Они автоматически меняют фон кнопки на #1C3964, текст на белый и сохраняют скругление в 30px при клике.
5. Проверка и тесты
После публикации обязательно проверьте:
- Не «прыгает» ли страница к якорю (скрипт должен блокировать переход).
- Корректно ли отображаются блоки на мобильных устройствах.
- Работает ли Lazy Load (прогружаются ли картинки внутри вкладок).
Итог: Теперь вы не ограничены стандартными блоками Tilda и можете создавать интерфейсы любого уровня сложности!