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

Этот скрипт позволит тебе сделать любое количество независимых друг от друга табов, для переключения сразу нескольких блоков одновременно (например если в одной вкладке должно быть 2+ зеро). Работает с Autoscale. Пример работы модификации внизу cтраницы

1 мин.

JavaScript

Zeroblock

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

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

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

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

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

5. Если будешь делать кнопки переключения между табами, задай им классы vtprev и vtnext и тоже пропиши в них порядковый номер в середину класса (например vt1prev это кнопка назад для первых табов, vt2next - это кнопка вперед для вторых)

6. Добавь на страницу блок ME603, укажи в нём блоки которые должна открывать каждая вкладка и пропиши в генератор его recid

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

Инструкция

Важно!

- Модификация не совместима с basic animation в переключаемых табами Zero
- Если используешь эти табы вместе с моими другими табами и ЭТИ табы у тебя стоит под ДРУГИМИ, то блок МЕ603 на котором основываются эти табы может неправильно рассчитать высоту страницы и получится бесконечный скролл. В таком случае просто замени другие табы на эти и всё

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

undefined

Скопировать

vtab1-1

Скопировать

vt1prev

Скопировать

vt1next

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

Отчистить поля

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

Tab 1

Tab 2

Tab 3

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

Zero Block 1

Tilda Publishing

create your own block from scratch

Zero Block 2

Tilda Publishing

Теперь кнопок может быть сколько угодно и они могут быть в самих табах

Tab 1

Tab 2

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

Tab 1

Tab 2

Tab 3

Tab 4

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

Zero Block 1

Tilda Publishing

create your own block from scratch

Zero Block 2

Tilda Publishing

create your own block from scratch

Zero Block 3

Tilda Publishing

create your own block from scratch

Zero Block 4

Tilda Publishing

create your own block from scratch

Zero Block 5

Tilda Publishing

create your own block from scratch

Travel

Why every designer should visit Rotterdam?

After initial crisis re-construction the center of Rotterdam has become the site of ambitious new architecture.

Culture

Let your culture be your brand

A brand in order to be relevant to consumers and sustainable over time must operate much like a culture.

Style

Nordic nature and Scandinavian lifestyle

The ways that vast empty spaces affect how you feel and how to spend your summer the Scandinavian way.

Movies

An urbanist's guide to the best cities to visit

Learn how to get there, where to stay and how to have the best time.

Culture

10 summer festivals from Berlin to Leipzig

Films are chosen in each category by a section director with the advice of a committee of film experts.

Design

Back to purity, back to simplicity

Simplicity is about subtracting the obvious and adding the meaningful.

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

Tab 1

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

Tab 2

Tab 3

Tab 4

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

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

Tab 1

Tab 2

Tab 3

Tab 4

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