ВИДЕО-ОБЗОР НА RUTUBE:
Попробуйте как это работает:
FAQ
Как менять цвет нажатой кнопки?
Создайте ещё одну кнопку с нужным цветом, но CSS-класс ей присвойте не как для кнопки "switchbutton...", а как для элементов, которые должны появляться "switchelem...". В настройках этой кнопки отключите pointer-events (события указателя). Разместите эту кнопку поверх той, которая должна менять цвет при клике.
 |
1 покупка навсегда! Покупаете 1 раз и можете использовать в любом количестве проектов без ограничений во времени. |
Задать вопрос перед оплатой
ДАЛЕЕ МОЖНО НЕ ЧИТАТЬ. НАПИСАНО ДЛЯ SEO-ПРОДВИЖЕНИЯ САЙТА :)
Нередко при создании сайтов на Тильде возникает необходимость сделать табы. Это такие кнопки-переключатели, при клике на которые меняется контент в некоторой области.
Я покажу способ, который не требует ежемесячной оплаты подписки на различные сервисы и установки расширений в браузере. Кроме того, кнопки-переключатели вкладок можно располагать как угодно, не обязательно горизонтально или вертикально. Кнопками могут быть любые объекты – тексты, шейпы, изображения или векторы, а табы могут состоять из любого количества любых объектов и располагаться они тоже могут по-всякому.
У меня в примере показаны табы в ЗЕРО-блоке, состоящие из шейпов, текстов и изображений, и вообще всё тут я нарисовал так, чтобы оно имело привычный Вам для табов вид, но Вы можете использовать абсолютно любые элементы, доступные в ZERO блоках, и размещать их как пожелаете. По большому счёту – это и табами назвать трудно, потому что свободы в дизайне мой способ даёт гораздо больше. И кнопки переключатели вкладок и сами табы, а точнее – элементы, из которых они состоят, могут находиться в любых местах страницы – хоть в одном ЗЕРО блоке, хоть в разных, и даже разбросаны по телу страницы, шапке и подвалу - всё равно всё будет работать – при клике на соответствующие кнопки-переключатели будут исчезать и появляться соответствующие им объекты: изображения, тексты, шейпы, другие кнопки, векторы, галереи, формы обратной связи и так далее.
Реализуется всё предельно просто: элементам, которые выступают в качестве кнопок, по правой клавише мыши из контекстного меню назначьте классы: для первой кнопки «switchbutton1», для второй -«switchbutton2», для третьей - 3 и так далее. Элементам, которые должны появляться при клике на первую кнопку и пропадать при клике на другие, назначьте класс «switchelem1». Для элементов, соответствующих второй кнопке, прописываем класс «switchelem2», для третьей – 3 и так далее.
Как Видите, такой способ действительно позволяет использовать любые элементы и размещать их как попало. Верстаем всё это для разных размеров дисплея, а потом просто добавляем на страницу из раздела «Другое» блок «T123-HTML» и по клику на кнопку «Контент» вставляем в него мой программный код. Публикуем – и всё работает!
Ключевые слова:
табы в тильде
табы в tilda
табы в зеро блоке
табы в zero
вкладки в тильде
вкладки в tilda
вкладки в зеро блоке
вкладки в zero
