TelegramVkontakteMessengerSkype
Как переключать таблички по клику на кнопку в ZeroBlock в Tilda
Программа курса
Чему вы научитесь и что узнаете на курсе
Sed do eiusmod tempor incididunt ut labore
Ut enim ad minim veniam, quis nostrud
Duis aute irure dolor in reprehenderit in voluptate
1
2
3
Quis autem vel eum iure reprehenderit
4

Как переключать таблички по клику на кнопку в ZeroBlock в Tilda

1
Создали ZeroBlock, добавили элемента Image с иконками точек
2
Назначили им классы
tabtn_1
tabtn_2 и т.д.
3
Создали таблички плашки для информации. Это составной компонент:
shape (фон) , Text (цифра и описание)
Назначили всем элементам такого компонента общий класс
tabcont_1 для первого
tabcont_2 для второго и т.д.
4
Вставили код на страницу в блок Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём переключение группы элементов в ZeroBlock при клике на кнопки в этом блоке.
Длительность видео: 28 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
div[class*="tabtn_"]{
    cursor:pointer;
    transition:all 0.2s linear;
}   
.tabEff{transform:scale(1.2)}
div[class*="tabtn_"]:not(.tabEff):hover {transform: scale(0.8)}
.tabcont-hide {
    opacity: 0!important;
    pointer-events: none!important;
}    
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
let tabcont = document.querySelectorAll('div[class*="tabcont_"]');
tabcont.forEach(i => i.classList.add("tabcont-hide"));
let tabcontFirst = document.querySelectorAll('.tabcont_1');
tabcontFirst.forEach(i => i.classList.remove("tabcont-hide"));
let tabBtnFirst = document.querySelectorAll('.tabtn_1');
tabBtnFirst.forEach(i => i.classList.add("tabEff"));

let tabBtn = document.querySelectorAll('div[class*="tabtn_"]');
for (let i = 0; i < tabBtn.length; i++) {
    tabBtn[i].addEventListener('click', function() {
        let blockEl = this.closest('.t-rec'); 
        
        let className = this.getAttribute('class');
        let classArr = className.split(' '); let index=0;
        classArr.forEach(function(item, i) {
            if(item.includes('tabtn_')) index = +classArr[i].replace(/[^0-9]/g,"");
        });
        
        if(!className.includes('tabEff')) {
            blockEl.querySelectorAll('div[class*="tabcont_"]').forEach(i => i.classList.add("tabcont-hide"));
            blockEl.querySelectorAll('div[class*="tabtn_"]').forEach(i => i.classList.remove("tabEff"));
            this.classList.add("tabEff");
            blockEl.querySelectorAll('div[class*="tabcont_'+index+'"]').forEach(i => i.classList.remove("tabcont-hide"));
        };
    });
};
});
</script>
Made on
Tilda