Как сделать вкладки для переключения любых блоков?
Этот скрипт позволит тебе сделать любое количество независимых друг от друга табов, для переключения любых блоков и листать табы стрелками. Работает с Autoscale. Пример работы модификации внизу cтраницы
1 мин.
Видео-инструкция
JavaScript
Zeroblock
Обновление от 02.05.23 - Изменен класс который назначается для кнопок табов и убрана необходимость делать кнопки в отдельном зеро, поэтому класс для кнопок отличается от видео, см. инструкцию ниже ↓
!
1. Создай в зероблоке нужно количество кнопок\шейпов\того, что будет табами
2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)
3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)
4. Укажи порядковый номер табов на странице в генераторе
5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми
6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next - это кнопка вперед для вторых)
7. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только "до" или только "после", так и оба сразу)
8. Если тебе нужно использовать вкладки внутри других вкладок, то следуй этим шагам:
8.1 Создай сначала главные табы, которые должны переключать блоки с второстепенными табами внутри себя
8.2 При генерации кода главных табов, укажи в поле "номера табов внутри этих..." все порядковые номера второстепенных табов (например главные табы у меня первые на странице и внутри себя они должны будут переключать ещё 2-е и 3-и второстепенные табы, значит в это поле я пишу - 2,3 и отмечаю чекбокс "выбери этот пункт если будешь использовать мои табы ...")
8.3 Далее создай второстепенные табы, которые будут преключаться внутри главных
8.4 Помести код главных табов ниже второстепенных и всех переключаемых ими блоков
9. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок
2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)
3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)
4. Укажи порядковый номер табов на странице в генераторе
5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми
6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next - это кнопка вперед для вторых)
7. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только "до" или только "после", так и оба сразу)
8. Если тебе нужно использовать вкладки внутри других вкладок, то следуй этим шагам:
8.1 Создай сначала главные табы, которые должны переключать блоки с второстепенными табами внутри себя
8.2 При генерации кода главных табов, укажи в поле "номера табов внутри этих..." все порядковые номера второстепенных табов (например главные табы у меня первые на странице и внутри себя они должны будут переключать ещё 2-е и 3-и второстепенные табы, значит в это поле я пишу - 2,3 и отмечаю чекбокс "выбери этот пункт если будешь использовать мои табы ...")
8.3 Далее создай второстепенные табы, которые будут преключаться внутри главных
8.4 Помести код главных табов ниже второстепенных и всех переключаемых ими блоков
9. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок
Инструкция
Важно!
- Модификация не совместима с basic animation
в переключаемых табами Zero
- После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они "переключали блоки сами с собой". В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент
- Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам, которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе
- После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они "переключали блоки сами с собой". В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент
- Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам, которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе
(Развернуть)
Скопировать
tabbtn1-1
Скопировать
tab1next
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 2
Tab 1
Табы назначенны на кнопки. Под табами в зеро добавлена белая линия. Для активной кнопки таба задано белое подчёркивание с высотой в 3 рх
Tab 1
Пример работы модификации 2
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
Tab 1
Tab 2
Tab 4
Пример работы модификации 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