Содержание
Длительное время, чтобы создать переключаемые табы или вкладки в своих проектах на тильда, я использовал стандартный блок. Он позволял скрывать другие блоки и показывать их при нажатии на вкладку или таб. Но это было ограничено тем, что нужно было указывать id целых блоков.
Однако с каждым новым проектом дизайн и функционал усложнялся, что в итоге привело к необходимости поиска своего решения.
Последней каплей стала задача, в которой необходимо было внутри зероблока скрывать и показывать блоки при нажатии на кнопку (таб или вкладка). Причем эти кнопки переключени должны были находиться на странице в любом месте, а не только внутри самого zeroblock со вкладками.
На картинке выше, это первый блоко (zeroblock), каждое такое изображение из четырех является переключателем вкладки в блоке ниже. При этом по нажатии на любую из 4х картинок, мы прокручиваем экран до блока с табами автоматически.
На скриншоте выше, мы видим зероблок с табами и кнопками переключения, причем если мы в первом блоке нажали на картинку звездные миры, то автоматически опустимся до этого блока и данная вкладка будет активной. Также мы можем переключать вкладки и в этом блоке, через кнопки (шейпы, да хоть текст, не важно). Для наглядности можете посмотреть видео ниже. Мне было лень вырезать, поэтому смотрите до самого конца:-)
Для информации, все коды что я даю написаны мной, они рабочие, но это первоначальные варианты, без оптимизации и грамотного синтаксиса. Их главная задача дать вам базовое решение, а далее вы уже сами, при желании, доведёте до ума его. И если появилась классная доработка, не жадничайте, присылайте мне в личные сообщения
Готовим зероблок
Размещаем сами табы, которые будут переключать вкладки
Каждому такому табу присваиваем CSS класс btab1, по нему код будет понимать что это кнопка для показа своего контента. Причем цифра на конце для удобства означает номер кнопки. Заметьте, у меня например в качестве кнопки используется шейп и текст. Поэтому я присваиваю класс btab1 им обоим. Для второй кнопки будет класс btab2, для третье btab3 и т.д.
Далее размещаем сам контент. Допустим если у вас 5 табов, то вы должны каждому контенту относящемуся к своей кнопке присвоить соответствующий класс. Например для кнопки btab1 весь контент который к нему будет относиться (тексты, картинки, шейпы и т.д.) будут иметь класс tab1
Единственный момент, что после того как вы адаптировали и все расположили для первой вкладки, сгруппируйте её в одну группу, так как потом вам будет проще ориентироваться. Например первая вкладка «Олененок Динь» это группа, каждый элемент которой имеет класс tab1 и находиться по слоям в самом верху. Под ним находится вторая группа «Путешествие по звездам», каждый элемент данной группы имеет класс tab2, а её кнопка переключатель будет иметь класс btab2
Надеюсь понятна логика. Имейте ввиду, что кнопка переключатель с классом btab(цифра) может находиться вообще где угодно и не обязательно в том же зероблоке где и вкладки. В этом то и удобство данного решения
Размещаем код для табов из zeroblock
Тут все просто, добавляем стандартный html блок и пихаем в него портянку кода. В этот раз пробежался и постарался максимально подробно прокомментировать каждую строчку
<script>
// раз в секунду ищем таб 1 чтобы запустить скрипт
let filter_i = setInterval(function() {
if (document.querySelector(".btab1")){
//если нашли останавливаем таймер
clearInterval(filter_i);
// ИЩЕМ ВСЕ ШЕЙПЫ - КНОПКИ
// ИЩЕМ МЫ ПО СВОЕМУ КЛАССУ .btab(цифра)
let el_button1_shape = document.querySelector('.btab1[data-elem-type="shape"]')
let el_button2_shape = document.querySelector('.btab2[data-elem-type="shape"]')
let el_button3_shape = document.querySelector('.btab3[data-elem-type="shape"]')
let el_button4_shape = document.querySelector('.btab4[data-elem-type="shape"]')
let el_button5_shape = document.querySelector('.btab5[data-elem-type="shape"]')
let el_button6_shape = document.querySelector('.btab6[data-elem-type="shape"]')
let el_button7_shape = document.querySelector('.btab7[data-elem-type="shape"]')
// АКТИВЫНЙ ТАБ 1 ПО УМОЛЧАНИЮ
el_button1_shape.classList.add("el_button_shape_aktive");
// Ищем все кнопки с btab1
document.querySelectorAll('.btab1').forEach(el_button1 => {
// Каждой кнопке btab1 присваиваем клик и функцию клика
el_button1.onclick = function() {
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 1
el_button1_shape.classList.add("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB2
document.querySelectorAll('.btab2').forEach(el_button2 => {
// Каждой кнопке BTAB2 присваиваем клик и функцию клика
el_button2.onclick = function() {
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 2
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.add("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB3
document.querySelectorAll('.btab3').forEach(el_button3 => {
// Каждой кнопке BTAB3 присваиваем клик и функцию клика
el_button3.onclick = function() {
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 3
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.add("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB4
document.querySelectorAll('.btab4').forEach(el_button4 => {
// Каждой кнопке BTAB3 присваиваем клик и функцию клика
el_button4.onclick = function() {
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 4
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.add("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB5
document.querySelectorAll('.btab5').forEach(el_button5 => {
// Каждой кнопке BTAB3 присваиваем клик и функцию клика
el_button5.onclick = function() {
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 5
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.add("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB6
document.querySelectorAll('.btab6').forEach(el_button6 => {
// Каждой кнопке BTAB3 присваиваем клик и функцию клика
el_button6.onclick = function() {
// Ищем все элементы для таба с классом tab6
document.querySelectorAll('.tab6').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 6
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.add("el_button_shape_aktive");
el_button7_shape.classList.remove("el_button_shape_aktive");
};
});
// Ищем все кнопки с BTAB7
document.querySelectorAll('.btab7').forEach(el_button7 => {
// Каждой кнопке BTAB3 присваиваем клик и функцию клика
el_button7.onclick = function() {
// Ищем все элементы для таба с классом tab7
document.querySelectorAll('.tab7').forEach(el => {
// присваиваем класс элементам tab_el_show чтобы показать
el.classList.add("tab_el_show");
});
// УДАЛЯЕМ
// Ищем все элементы для таба с классом tab1
document.querySelectorAll('.tab1').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab2
document.querySelectorAll('.tab2').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab3
document.querySelectorAll('.tab3').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab4
document.querySelectorAll('.tab4').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
// Ищем все элементы для таба с классом tab5
document.querySelectorAll('.tab5').forEach(el => {
// присваиваем класс элементам tab_el_hide чтобы скрыть
// удаляем класс tab_el_show чтобы скрыть
el.classList.add("tab_el_hide");
el.classList.remove("tab_el_show");
});
//ДЕЛАЕМ АКТИВНЫМ ШЕЙП 7
el_button1_shape.classList.remove("el_button_shape_aktive");
el_button2_shape.classList.remove("el_button_shape_aktive");
el_button3_shape.classList.remove("el_button_shape_aktive");
el_button4_shape.classList.remove("el_button_shape_aktive");
el_button5_shape.classList.remove("el_button_shape_aktive");
el_button6_shape.classList.remove("el_button_shape_aktive");
el_button7_shape.classList.add("el_button_shape_aktive");
};
});
}
}, 1000);
</script>
<style>
/*Состояние табов по умолчанию*/
.tab2, .tab3, .tab4, .tab5, .tab6{display:none;}
.btab1, .btab2, .btab3, .btab4, .btab5, .btab6, .btab7{cursor: pointer;}
.btab1[data-elem-type="shape"] > .tn-atom{background-color:#ffec8b;}
/*Активации скриптом*/
.tab_el_hide{display:none;}
.tab_el_show{display: table;}
.tab_el_show > div{display: table-cell;}
.el_button_shape_aktive > .tn-atom{background-color: #ffec8b !important;}
</style>Да, огромная портянка получилась, но её можно упростить выведя одни и теже операции под функции. А так по факту здесь все просто.
Для начала устанавливаем состояние по умолчанию. Например у меня активен первый таб (показан его контент + активна кнопка).
Далее при нажатии на кнопку переключения с классом, например btab3 (это может быть что угодно: картинка, видео, шейп), контент, который имеет класс tab3 получает дополнительный класс tab_el_show и благодаря css становиться виден, а кнопка btab3 cтановится активной. Остальной контент с классами tab1,tab2,tab4,tab5,tab6,tab7 становится невидимым за счет присвоения класса tab_el_hide и удаления с них класса tab_el_show, а их кнопки становятся неактивными, за счет удаления с них класса el_button_shape_aktive
Таймер здесь используется тупо для поиска первого контента с классом btab1 далее он останавливается до перезагрузки.
И да, если у вас 4 кнопки и соответственно 4 вкладки, то у вас будет так, кнопки (btab1,btab2,btab3,btab4), контент вкладок (tab1,tab2,tab3,tab4). Количество кнопок с одним классом, например btab2 не ограничено, как и контента под классом, например tab4
Готовое решение табы внутри \ снаружи зероблок для Тильды
Я знаю, как трудно найти полезную информацию о табах для Tilda в этом океане цифрового творчества. Сам, как веб-дизайнер, сталкивался с нехваткой реально рабочего кода по этой теме. Поэтому и создал данную расширенную модификацию, чтобы убрать неудобство стандратных табов и сделать решение более гибким
💪 В этом готовом решении вы сможете создавать неограниченное число табов, кнопки переключатели могут быть чем угодно (элемент внутри zeroblock, стандартная кнопка, а также элементами в разных zeroblock), а вкладки либо элементы внутри зероблок, либо сами целые блоки
Стоимость: 1 200 ₽ (включена инструкция по установке и настройке)
Приобрести здесь: https://web4life.ru/unlimited-tabs
Как со мной связаться
Если вы не нашли вашего решения в текущей статье, тогда присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.
Еще материалы
-
Настоящий личный кабинет для Интернет — Магазина на ТильдеГотовые модули для расширения функционала интернет — магазина на Тильде. Промокоды, отзывы, история покупок, бонусная программа
-
Как добавить дополнительные товары в корзине в Tilda при добавлении основного
При добавлении основного товара в корзину Тильды, автоматически добавляем дополнительные товары
-
Промокод на определенный товар ТильдаКак добавить промокод на тильде на определенный товар, и вообще как сделать промокод. Рассмотрим порядок действий, все хитрости и нюансы
-
Изменение стоимости доната \ пожертвования в тильде для фонда помощи \ благотворительностиНачну пожалуй с самого главного, да, принимать оплаты для благотворительного фонда с изменением цены как в корзине так и на
-
СSS и Тильда, работаем правильно
Все что нужно знать для работы с CSS в онлайн — конструкторе сайтов Тильда. От удобного размещения и до синтаксиса с логикой работы.
-
Как сделать слайдер в Тильде внутри Zero block
Zero block tilda — это фантастический инструмент для интеграции пользовательских слайдеров в дизайн сайта. Он не только позволяет создавать слайды для демонстрации контента, но и позволяет контролировать
