Как сделать вкладки для переключения любых блоков?

1. Создай в зероблоке нужно количество кнопок\шейпов\того, что будет табами

2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)



3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)

4. Укажи порядковый номер табов на странице в генераторе

5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми

6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next - это кнопка вперед для вторых)

Инструкция

Важно!

- Модификация не совместима с basic animation в переключаемых табами Zero
- После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они "переключали блоки сами с собой". В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент
- Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам, которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе

(Развернуть)

8. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только "до" или только "после", так и оба сразу)

9. Если тебе нужно использовать вкладки внутри других вкладок, то следуй этим шагам:
9.1 Создай сначала главные табы, которые должны переключать блоки с второстепенными табами внутри себя
9.2 При генерации кода главных табов, укажи в поле "номера табов внутри этих..." все порядковые номера второстепенных табов (например главные табы у меня первые на странице и внутри себя они должны будут переключать ещё 2-е и 3-и второстепенные табы, значит в это поле я пишу - 2,3 и отмечаю чекбокс "выбери этот пункт если будешь использовать мои табы ...")
9.3 Далее создай второстепенные табы, которые будут преключаться внутри главных
9.4 Помести код главных табов ниже второстепенных и всех переключаемых ими блоков

10. Если тебе нужно показывать по одной кнопке несколько блоков, то возьми все эти несколько блоков в квадратные скобки вот так



В этом примере по первой кнопке tabbtn1-1 будет показан блок 111111, а по tabbtn1-2 блоки 222222 и 333333 одновременно

11. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок

7. Если тебе нужно переключать вкладки выпадающим списком, то создай в зеро форму, добавь туда dropdown и задай форме класс tabdrop, указав в конце порядковый номер табов на странице (т.е. tabdrop1 это выпадашка для первых табов на странице и тд):

Также в таком варианте всё-равно не забудь создать кнопки, т.к. выпадающий список всё-равно будет кликать по кнопкам, просто если они тебе не нужны то можешь убрать их за пределы видимости в твоём зероблоке

Табы назначенны на кнопки. В переключаемых зеро задана sbs animation по element on screen. Выставлен белый фон и черный цвет текста для активной кнопки таба. Включен режим повышенной совместимсти с ст. блоками

Пример работы модификации

Tilda Publishing

Tilda Publishing

Табы назначенны на кнопки. Под табами в зеро добавлена белая линия. Для активной кнопки таба задано белое подчёркивание с высотой в 3 рх

Пример работы модификации 2

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа

Пример работы модификации 3

There is no design without discipline. There is no discipline without intelligence.

В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа

Пример работы модификации 3

Everything should be made as simple as possible, but not simpler.

В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа

Пример работы модификации 3

Lorem ipsum lorem shmipsum lorem gigaipsum

В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа

Пример работы модификации 3

The work you do while you procrastinate is probably the work you should be doing for the rest of your life.

Те же табы, что и в примере 2, но со включенным режимом "добавить переключение кнопками". В зеро включен Autoscale

Пример работы модификации 4

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Те же табы, что и в примере 2, но со включенным режимом "табы внутри табов".

Пример работы модификации 5

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing

Tilda Publishing