Переключение нескольких zero-block через свои кнопки
Данный код помогает добавить свои кастомные табы и переключать несколько zero-блоков при нажатии. Также есть возможность добавить кастомные стрелки
Переключение zero-block
Заказать код
Вступить в чат
Предложить код
Инструкция
Добавьте zero-блок, наполните контентом и создайте несколько кнопок с классом: tab_btn
Добавьте 2 иконки стрелок с классами left_tab и right_tab ( если хотите переключать стрелками )
Сделайте копии Zero-block и отредактируйте контент
Вставьте код на страницу
в блок Другое — Т123
И впишите ID всех ваших блоков в код на страницу в «Т123 [‘#rec346064270′,’#rec346073573’]
Код скопирован
.disabled-tab < pointer-events: none; >.tab-transition < transition: all 500ms ease-in-out; >.tab-button, .next-tab, .prev-tab < cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.hidden < opacity: 0; >.inactive < z-index: -1; >.tab-container, .inactive < position: relative; overflow: hidden; >.custom-tab-section
Как добавить табы Тильда v.2 . Переключение нескольких зеро блок
Данный код помогает переключать несколько зеро блоков на странице при нажатии на свои кнопки. Обновленный, простой и 100% рабочий способ
Переключение zero блок своими кнопками
Заказать код
Вступить в чат
Предложить код
Инструкция
Создайте кнопки и присвойте каждой класс .tab-btn
Вставьте ссылки в каждую кнопку #tab1, #tab2, #tab3 и так далее
Создайте свои zero-блок и присвойте им классы .uc-tab1, .uc-tab2, .uc-tab3 и тд.
Вставьте код на страницу
в блок «Другое» — Т123
Измените цвет #ff005a активной
вкладки на свой
Код скопирован
Код для вставки
.my-active-class
Как добавить вкладки и переключать блоки?
Чтобы сделать вкладки, нужно добавить на страницу блок ME602 или ME603 из раздела Меню. Блок позволяет создавать на странице вкладки и показывать разный контент по клику на соответствующую вкладку в рамках одной страницы. Затем ниже последовательно расположить все блоки, которые будут меняться при клике на вкладку.
- Напишите название вкладок в меню «Контент» блока ME602 или ME603.
- Укажите ID блоков, которые должны быть видны при клике на эту вкладку, через запятую и без пробела.
- ID блока можно посмотреть в меню «Настройки» каждого блока, в самом низу.
Подробнее о создании вкладок читайте в инструкции Дизайн меню сайта и применение на практике.
Максимальное количество вкладок 8 (восемь).
Похожие вопросы
- Как добавить меню второго уровня (многоуровневое меню)?
- Как сделать, чтобы одно меню накладывалось на первый блок, а второе появлялось при скролле?
- Как добавить одно меню на все страницы?
- Как создать меню вида «хлебные крошки»?
- Какие блоки меню фиксируются на мобильных?
Вкладки и табы из zero block в Tilda
Я не знаю, что еще лучше привлечет ваше внимание, чем это красное поле…
Убедительная просьба, прочитайте статью, а не бездумно вставляйте код. Если у вас что-то не работает – это 99,99% потому что вы не внимательно прочитали или вовсе не прочитали текст. Я отвечаю многим людям и почти в 100% виновата невнимательность.Так же, напоминаю!
Если есть вопрос, что-то не работает, не получается, нужно переделать или адаптировать код к вашему проекту, пожалуйста оставьте заявку и я с вами свяжусь.
Если поставили код, а он не работает, то с вопросом, скидывайте ссылку на страницу своего проекта.Текст комментария “А я поставил, а не работает” — не может дать мне понять, что же конкретно произошло и что у вас не работает, а страницу я могу проинспектировать и понять, где вы накосячили.
ВОТ ТУТ НОВЫЙ СКРИПТ ВЗАМЕН ЭТОМУ
Ещё один способ скрывать блоки по клику на кнопки в Tilda. Данный пример подойдет для тех кто хочет сделать много вкладок. Основан он на jQuery плагине Owl Carousel. Да, фактически это слайдер, но функцию вкладок и табов он выполняет, слайды сменяют друг друга только при клике на назначенный вами триггер.
Плюс данного метода в том, что мы можем делиться ссылкой и при открытии сразу будет показана нужная вкладка.
Минусы – скрипт конфликтует с блоком плавного скролла
Пример
В примере я буду использовать 2 блока навигации – стандартный блок меню ME606 и кнопки в Zero block. В качестве блоков с контентом можно использовать как стандартные блоки, так и Zero block. Я же просто размещу Zero с иллюстрациями, которые рисовал ранее.
ME606
Как сделать вкладки из блоков в Tilda
- Создаем блок навигации (табы) – любые кнопки, как в стандартном, так и в Zero block
- Создаем блок T123, вставляем в него первый код
- Создаем блоки с контентом
- Создаем ещё один T123, вставляем в него скрипт
- Заменяем id блоков на свои
- Создаем третий T123, добавляем скрипт
- Заменяем id блоков, присваиваем названия ссылок
- Добавляем названия ссылок на свои кнопки (ссылки вида #link)
Первый Т123
Это второй Т123
Это третий Т123
Тут пишешь id zero блоков, которые слайды и назначаешь им ссылки.
Сейчас там стоят порядковые номера, но можешь что угодно в кавычки вписать.
Потом по этой ссылке будет вызываться слайд
Ссылки будут #first или #1 или #tvoy-variant
Ссылку можешь зацепить за любую кнопку или что угодно
Пример вверху на основе меню и на основе zero
Скрытыми могут быть любые блоки, как зеро, так и обычные
.tb.active .tn-atom