Как переключать таблички по клику на кнопку в 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 tabContents = document.querySelectorAll('div[class*="tabcont_"]');
            let tabButtons = document.querySelectorAll('div[class*="tabtn_"]');
        
            function selectContent(index) {
                for (let button of tabButtons) {
                    
                    for (let className of button.classList) {
                        if (!className.includes("tabtn")) {
                            continue
                        }
                        if (className === "tabtn_" + index) {
                            button.classList.add("tabEff")
                        }
                        else {
                            button.classList.remove("tabEff")
                        }
                    }
                }
        
                for (let content of tabContents) {
                    for (let className of content.classList) {
                        if (!className.includes("tabcont")) {
                            continue
                        }
                        if (className === "tabcont_" + index) {
                            content.classList.remove("tabcont-hide")
                        }
                        else {
                            content.classList.add("tabcont-hide")
                        }
                    }
                }
            }
        
            for (let eventBtn of tabButtons) {
                eventBtn.addEventListener("click", function() {
                    for (let className of eventBtn.classList) {
                        if (!className.includes("tabtn_")) {
                            continue
                        }
                        index = className.replace(/[^0-9]/g, "");
                        selectContent(index)
                    }
                })
            }
        
            selectContent(1)
        });
    </script>
Made on
Tilda