Как переключать таблички по клику на кнопку в 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);
}
</style>
<script>
$( document ).ready(function() {
$('div[class*="tabcont_"]').not('.tabcont_1').hide();
$('.tabtn_1').addClass('tabEff');
$('div[class*="tabtn_"]').click(function(){
if (!$(this).hasClass('tabEff') ){
    let blockEl = $(this).closest('.t-rec');
    let tabMax = blockEl.find('div[class*="tabtn_"]').length;
    let className = $(this).attr('class');
    let tabNum;
    for (let i=1; i<tabMax+1;i++){
    let contain = className.includes('tabtn_'+i);
    if (contain) tabNum=i;
    };
    blockEl.find('div[class*="tabcont_"]').fadeOut(300);
    blockEl.find('.tabcont_'+tabNum).fadeIn(300);
    blockEl.find('div[class*="tabtn_"]').removeClass('tabEff');
    $(this).addClass('tabEff');
};
});
});
</script>
Made on
Tilda