Время настройки: 2 минуты

Вкладки из Zero-блоков

Позволяет создавать кастомные табы внутри Zero-блока — с активными вкладками, управлением по наведению и настраиваемой анимацией

Табы с вкладками и управлением стрелками

Переключатель Zero-блоков по кнопкам

Дополнение

Переключатель контента в Zero-блоке

Дополнение

Переключатель контента в Zero‑блоке

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте блок с контентом, который будет переключаться и присвойте ему класс .uc-tabs

Если вы планируете использовать несколько таких блоков на странице, задайте им разные названия классов, например, .uc-tabs1, .uc-tabs2 и т. д.
Добавьте вкладки, по нажатию на которые будет переключаться контент и присвойте им ссылку #tab

В качестве вкладок можно задать как отдельные элементы, так и группы с типом Object. В обоих случаях им нужно присвоить ссылку #tab.

Для настройки активного состояния добавьте в блок элементы или объекты, которые будут появляться при нажатии на вкладки и присвойте им ссылку #tab и класс .tab-active.
Добавьте в блок элементы, которые должны переключаться и присвойте им класс .tab-elem

Аналогично, если по нажатии на вкладку должно переключаться несколько элементов, объедините их в группу с типом Object и присвойте ей такой же класс.
Расположите вкладки/элементы в слоях в порядке возрастания

Первой (нижней) вкладке в слоях будет соответствовать первый элемент с контентом и первая активная вкладка. См. пример
Если вы хотите переключать контент по кнопкам, задайте им ссылки – #next для кнопки «вперёд» и #prev для кнопки «назад»
Задайте в настройках модификации поведение элементов и их стили
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>tabs.init(".uc-tabs", { hover: true })</script>

Открыть пример

Пример с автолэйаутом

+

Настройки модификации

Скорость и тип переходов:

Класс блока с контентом:

Переключать по ховеру:

+ Настройки стилей

Бордер активной вкладки

Цвет фона активной вкладки

Вкладки

Непрозрачность неактивных вкладок

Вы можете задать свои стили для активного состояния вкладок, если они не заданы на странице как отдельные элементы (.tab-active)

Задайте значение, чтобы скрыть неактивные вкладки или сделать их полупрозрачными.

+ Настройки автопереключения

Скорость переключения

Автопереключение вкладок

<!--tabs.js Переключатель контента в Zero-блоке. https://postnikovmd.com/mods/tabs/switch-->
<script>tabs.init(".uc-tabs")</script>

Скопировать код

Особенности

Имеет несколько состояний

Можно задать свои элементы для активного состояния вкладок
Поддерживает автолэйауты

Вкладки будут работать, даже если блок собран полностью в Auto Layout
Можно переключать по ховеру

Позволяет настраивать появление элементов по наведении/клику

Документация

Элементы

Параметры

Стили

Если вкладка активна, ей присваивается класс .selected. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
Эти классы можно использовать для кастомизации стилей через CSS.