Создаем табы (вкладки) внутри зероблок (zeroblock)

Длительное время, чтобы создать переключаемые табы или вкладки в своих проектах на тильда, я использовал стандартный блок. Он позволял скрывать другие блоки и показывать их при нажатии на вкладку или таб. Но это было ограничено тем, что нужно было указывать 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 в этом океане цифрового творчества. Сам, как вед-дизайнер, я сталкивался с нехваткой качественного контента по этой теме.

Я создал цикл мини-уроков — это не просто сборник базовых знаний. Это погружение в тонкости реализации разных схем использования уникальных промокодов на Tilda.

🎓 1 – Урок “Промокод можно активировать только для одного уникального товара” Демонстрация здесь https://web4life.ru/one-promo

🚀 2 – Урок “Промокод можно активировать на группу товаров. Например на 3 из 4-х”: Демонстрация здесь https://web4life.ru/group-promo

🔍3 – Урок “Промокод можно применить если в корзине набрано товаров на сумму больше или равно X” и “Промокод можно применить если в корзине набрано товаров на сумму больше или равно X, а также в корзине должны быть один или несколько определенных товаров” Демонстрация здесь https://web4life.ru/price-promo/

👜 4 – Урок “Несколько промокодов можно применить только каждый на свой  товар или группу товаров” Демонстрация здесь https://web4life.ru/uni-promo

Пишите https://t.me/vbalakin буду рад помочь с доработкой.

Еще материалы

Категория Tilda

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *