1 мин
Zeroblock
Light
5
Этот скрипт позволит тебе сделать любое количество независимых друг от друга табов, по нажатию кнопки включить отображение блоков или переключить их стрелками на Тильде. Модификация совместима с Autoscale.
Как сделать вкладки для переключения любых блоков?
(cвернуть)
Инструкция
Обновление от 02.05.23 - Изменен класс который назначается для кнопок табов и убрана необходимость делать кнопки в отдельном зеро, поэтому класс для кнопок отличается от видео, см. инструкцию ниже ↓
tabbtn1-1
tab1next
111111111,[222222,3333333],444444
tabdrop1
1. Создай в зероблоке нужно количество кнопок\шейпов\того, что будет табами
2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)
3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)
4. Укажи порядковый номер табов на странице в генераторе
5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми
6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next - это кнопка вперед для вторых)
7. Если тебе нужно переключать вкладки выпадающим списком, то создай в зеро форму, добавь туда dropdown и задай форме класс tabdrop, указав в конце порядковый номер табов на странице (т.е. tabdrop1 это выпадашка для первых табов на странице и тд):
Также в таком варианте всё-равно не забудь создать кнопки, т.к. выпадающий список всё-равно будет кликать по кнопкам, просто если они тебе не нужны то можешь убрать их за пределы видимости в твоём зероблоке
8. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только "до" или только "после", так и оба сразу)
9. Если тебе нужно использовать вкладки внутри других вкладок, то следуй этим шагам:
- Создай сначала главные табы, которые должны переключать блоки с второстепенными табами внутри себя
- При генерации кода главных табов, укажи в поле "номера табов внутри этих..." все порядковые номера второстепенных табов (например главные табы у меня первые на странице и внутри себя они должны будут переключать ещё 2-е и 3-и второстепенные табы, значит в это поле я пишу - 2,3 и отмечаю чекбокс "выбери этот пункт если будешь использовать мои табы ...")
- Далее создай второстепенные табы, которые будут преключаться внутри главных
- Помести код главных табов ниже второстепенных и всех переключаемых ими блоков
10. Если тебе нужно показывать по одной кнопке несколько блоков, то возьми все эти несколько блоков в квадратные скобки вот так
В этом примере по первой кнопке tabbtn1-1 будет показан блок 111111, а по tabbtn1-2 блоки 222222 и 333333 одновременно
11. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок
- Модификация не совместима с basic animation в переключаемых табами Zero
- После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они "переключали блоки сами с собой". В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент
- Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам, которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе
Важно!
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Скопировать код
123Табы назначенны на кнопки. В переключаемых зеро задана sbs animation по element on screen. Выставлен белый фон и черный цвет текста для активной кнопки таба. Включен режим повышенной совместимсти с ст. блоками
Примеры работы модификации
Tab 1
Tab 2
Tab 3
Tab 4
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
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
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 3
There is no design without discipline. There is no discipline without intelligence.
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 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
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
Те же табы, что и в примере 2, но со включенным режимом "табы внутри табов".
Tab 1
Tab 2
Tab 4
Пример работы модификации 5
Zero Block 1.1
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.2
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.3
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.4
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 2.1
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.2
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.3
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.4
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 3
Tilda Publishing
create your own block from scratch
Zero Block 4
Tilda Publishing
create your own block from scratch