Вкладки Табы Переключатели по клику в ZERO блоке Тильды. Табы ЗЕРО блок. Вкладки Tilda
Вкладки Табы Переключатели по клику в ZERO блоке Тильды. Табы ЗЕРО блок. Вкладки Tilda.
=================
ССЫЛКА на программный код:
https://howmakesite.ru/products/Vkladki-Taby-Pereklyuchateli-po-kliku-v-ZERO-bloke-Programmny-kod-dlya-Tilda-p669704796
=================
🏆 Мой СУПЕР-Курс по программированию в Тильде:
https://howmakesite.ru/products/Kurs-po-TILDA-Ot-Chaynika-do-PROGRAMMISTA-za-2-chasa-Pomosch-v-soobschestve-p583848367
Скорая помощь по Тильде (и не только):
https://howmakesite.ru/products/Razovaya-konsultatsiya-1-chas-p304431003
=================
ЗАРАБАТЫВАЙТЕ СО МНОЙ:
https://howmakesite.ru/pages/returns
=================
Нередко при создании сайтов на Тильде возникает необходимость сделать табы. Это такие кнопки-переключатели, при клике на которые меняется контент в некоторой области.
Я покажу способ, который не требует ежемесячной оплаты подписки на различные сервисы и установки расширений в браузере.
Кроме того, кнопки-переключатели вкладок можно располагать как угодно, не обязательно горизонтально или вертикально. Кнопками могут быть любые объекты – тексты, шейпы, изображения или векторы, а табы могут состоять из любого количества любых объектов и располагаться они тоже могут по-всякому.
У меня в примере показаны табы в ЗЕРО-блоке, состоящие из шейпов, текстов и изображений, и вообще всё тут я нарисовал так, чтобы оно имело привычный Вам для табов вид, но Вы можете использовать абсолютно любые элементы, доступные в ZERO блоках, и размещать их как пожелаете.
По большому счёту – это и табами назвать трудно, потому что свободы в дизайне мой способ даёт гораздо больше. И кнопки переключатели вкладок и сами табы, а точнее – элементы, из которых они состоят, могут находиться в любых местах страницы – хоть в одном ЗЕРО блоке, хоть в разных, и даже разбросаны по телу страницы, шапке и подвалу - всё равно всё будет работать – при клике на соответствующие кнопки-переключатели будут исчезать и появляться соответствующие им объекты: изображения, тексты, шейпы, другие кнопки, векторы, галереи, формы обратной связи и так далее.
Реализуется всё предельно просто: элементам, которые выступают в качестве кнопок, по правой клавише мыши из контекстного меню назначьте классы: для первой кнопки «switchbutton1», для второй -«switchbutton2», для третьей - 3 и так далее.
Элементам, которые должны появляться при клике на первую кнопку и пропадать при клике на другие, назначьте класс «switchelem1». Для элементов, соответствующих второй кнопке, прописываем класс «switchelem2», для третьей – 3 и так далее.
Как Видите, такой способ действительно позволяет использовать любые элементы и размещать их как попало.
Верстаем всё это для разных размеров дисплея, а потом просто добавляем на страницу из раздела «Другое» блок «T123-HTML» и по клику на кнопку «Контент» вставляем в него мой программный код.
Публикуем – и всё работает!
Ключевые слова:
табы в тильде
табы в tilda
табы в зеро блоке
табы в zero
вкладки в тильде
вкладки в tilda
вкладки в зеро блоке
вкладки в zero
Видео Вкладки Табы Переключатели по клику в ZERO блоке Тильды. Табы ЗЕРО блок. Вкладки Tilda автора Как сделать сайт
Видео Вкладки Табы Переключатели по клику в ZERO блоке Тильды. Табы ЗЕРО блок. Вкладки Tilda автора Как сделать сайт
Показать
Похожие видео
![Как добавить элемент в стандартные блоки Tilda. Тюнинг стандартных блоков.](http://pic.rutubelist.ru/video/e2/6a/e26a69ef525cffc798ce28127ca5a66c.jpg?size=s)
![Новый ноутбук Thunderobot 911 Air XS D](http://pic.rutubelist.ru/video/fe/51/fe51a33780786e97be10105cda41f7a1.jpg?size=s)
![Как ЗАБЛОКИРОВАТЬ Яндекс Советник Блокировщик Советника Goodmod Увеличение продаж интернет-магазина.](http://pic.rutubelist.ru/video/64/75/6475acfee87be7389a3b3b2185f5b5fd.jpg?size=s)
![Получил посылку из Ярославля. А в ней магнитола Sony CFD-100S с CD плеером.](http://pic.rutubelist.ru/video/88/59/88597201fcb98495e439679ed491d053.jpg?size=s)
![Как проверить состояние жёсткого диска](http://pic.rutubelist.ru/video/5e/be/5ebe2cb02ca05df20df01048133469a9.jpg?size=s)
![I. Architecture web app I.II Cache layer I.II.I Theory - Types part I](http://pic.rutubelist.ru/video/ce/f2/cef28d785b10fa14b48e8e83eb6283cd.png?size=s)
![Как выравнять текст кнопок в ZERO-блоке на Тильде. Выравнять названия кнопок в Tilda.](http://pic.rutubelist.ru/video/ca/20/ca203c10a2333fcf020f15d3fa762861.jpg?size=s)
![Купить Гарри Поттера Алиэкспресс](http://pic.rutubelist.ru/video/94/77/9477fbbdd8c75877f43ad4623d73fd84.jpg?size=s)
![Как сделать ИНТЕРНЕТ-МАГАЗИН с нуля Бесплатно и Самостоятельно. + ДРОПШИППИНГ.](http://pic.rutubelist.ru/video/b7/fc/b7fc50e01d4df960fd100cd1de150ee8.jpg?size=s)
![7 Создание поверхности по обьектам блоки отметок](http://pic.rutubelist.ru/video/81/02/810275fcd0337d747743b24338773983.jpg?size=s)
![3D-САЙТ в конструкторе Tilda на ZERO-Блоках. Объемный сайт в Тильде. Объемный сайт в ЗЕРО блоке.](http://pic.rutubelist.ru/video/12/0f/120f0b528a056788a503dab69700f9dd.jpg?size=s)
![Как завершить сеансы в Телеграмме если они не завершаются в целях безопасности ?](http://pic.rutubelist.ru/video/e9/37/e9379a1b92eb9c6d5ab61d659245c32f.jpg?size=s)
![Яндекс Директ (контекстная реклама, раскрутка сайта, как найти клиентов)](http://pic.rutubelist.ru/video/b8/22/b8227db7babf681499dfd69e8125ec3e.jpg?size=s)
![Лучший бесплатный антивирус](http://pic.rutubelist.ru/video/70/07/70074ca30e9741ab5c08111d1f5b62e4.jpg?size=s)
![Как создать сайт в word, без знаний программирования](http://pic.rutubelist.ru/video/77/39/7739feb8459e886713af76e44d95ac30.jpg?size=s)
![Как вставить КАРТУ в ZERO-блок на Tilda С ВЫСОТОЙ. Яндекс и Google карты в Зеро-блоке на Тильде 100%](http://pic.rutubelist.ru/video/e5/80/e580bc11e096ba9c20009c4c12bcdf64.jpg?size=s)
![3D элементы сайта на Tilda в ZERO блоке и неоновое свечение. Любой объект в 3D за пару кликов. Тень](http://pic.rutubelist.ru/video/2f/b0/2fb0f2f1aa691c8e3bbd8a8b619b1cf2.jpg?size=s)
![3D-Куб в конструкторе Tilda на ZERO-Блоках. Эффект объёмных объектов на видеофоне.](http://pic.rutubelist.ru/video/03/56/0356aec5cd63a0a090b23984e87961df.jpg?size=s)
![Режущий плоттер Silhouette Cameo. Наклейки и этикетки. Сахарная бумага для леденцов](http://pic.rutubelist.ru/video/2f/fa/2ffa701b4355f7e0f52abe0366384e21.jpg?size=s)
![Индивидуальное обучение как сделать сайт, интернет-магазин, SEO, продвижение, Директ](http://pic.rutubelist.ru/video/a2/2a/a22a166388ee1b4ee3243e1a3ac7b38a.jpg?size=s)