Делаем блок с вкладками в ZeroBlock в Tilda

Html code will be here

Наши услуги
Уголовные дела
Общеизвестно, что все новое - это хорошо забытое старое. В свое время в пылу реформаторства кто-то необдуманно (а может, и по иным неведомым автору причинам) отнял у суда право соединять уголовные дела в одно производство, "выплеснув ребенка из колыбели".
При этом до изменений уголовно-процессуального закона суд был наделен таким правом, ибо согласно ч. 3 ст. 26 УПК РСФСР соединение и выделение дел производилось по постановлению лица, производящего дознание, следователя, прокурора либо по определению или постановлению суда.
Our advantages
Everyday we work hard to make life of our clients better and happier
Quality
All our professionals have more than 5 years of legal experiences.
Support
We offer you professional consultation of our specialist in 30 minutes.
Price
Our prices are fixed for some standard services.

Делаем блок с вкладками в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили 5 Text элементов наименований для будущих вкладок и задали им ссылку #mylink
3
Добавили 5 элементов с фоновой фотографией image и задали им ссылку #mypicfon .Выставили первой фотографии прозрачность 15%, а остальным 4-ём - 0%
4
Добавили 5 красных иконок и задали им ссылку #icon
5
Добавили 5 белых иконок и задали им ссылку #iconb
6
Добавили текстовые блоки заголовка и контента
7
Добавили код на страницу в блок Другое►Т123
В коде заменили:
tn_text_1531315835300 - Идентификатор заголовка
tn_text_1531315998275 - Идентификатор основного текста
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём классический блок с табами (вкладками) в условиях одного ZeroBlock
Длительность видео: 31 мин
Фрагмент видео
Библиотека для примера

<style>
/*Добавляем отступы у табов*/
  .mytab {
    padding: 10px 10px 10px 20px;
    display: inline-block;
    width: inherit;
    box-sizing: border-box;
}
/*При наведении добавляем выступ справа*/
.mytab:hover:after ,  .activetab:after {
    content: '';
    position: absolute;
    right: -61px;
    top: 0px;
    border: 33px solid transparent;
    border-left: 28px solid #FF5757;
}
/*При наведении меняем цвет*/
 .mytab:hover , .activetab {
    background: #FF5757;
    color: #ffffff !important;
    box-shadow: -4px 3px 20px 2px #a2a2a2;
}
/*Отступы у иконок*/
 .myicon , .myiconb {
     padding-top:8px;
}
/*Прозрачность активной иконки*/
 .activeicon {
     opacity: 0 !important;
}
</style>

<script>

//Добавляем класс к табам
    $('[href="#mylink"]').addClass('mytab');
//Добавляем класс к иконкам на переднем плане   
    $('[href="#icon"]').addClass('myicon');
//Добавляем класс к иконкам на заднем плане   
    $('[href="#iconb"]').addClass('myiconb'); 
//Добавляем класс к заголовку
    $('[field="tn_text_1531315835300"]').addClass('mytitle');
//Добавляем класс к тексту
    $('[field="tn_text_1531315998275"]').addClass('mytext');
//Добавляем класс к фоновой картинке
    $('[href="#mypicfon"]').addClass('myfon');
    
//При старте выделяем вервый таб и скрываем переднюю иконку    
    $('.mytab:eq(0)').addClass('activetab');
    $('.myicon:eq(0)').addClass('activeicon');
     
     
//Объявляем порядковую переменную  
  var number = 0;  
    
//При наведении на таб делаем прозрачную иконку на переднем плане    
     $('.mytab').hover(function(){
//Вычисляем номер нашего таба         
    number = $(".mytab").index(this);
    //Скрываем переднюю иконку при наведении   
     $('.myicon:eq('+number+')').css('opacity' , '0');}, function(){
    //Показываем переднюю иконку при потере фокуса
     $('.myicon:eq('+number+')').css('opacity' , '1');});  

//При клике на таб
 $('.mytab').click(function(event) {
//Добавляем фото фонов
     $('.myfon').css('opacity' , '0.15');  
//Удаляем классы активной вкладки     
     $('.mytab').removeClass('activetab');
     $('.myicon').removeClass('activeicon');
//Активируем ту вкладку , на которую кликнули
     $('.mytab:eq('+number+')').addClass('activetab');
     $('.myicon:eq('+number+')').addClass('activeicon');
     
//Производим изменения в контенте при клике на табы     
    if (number==0){
        $('.mytitle').html('Уголовные дела');
        $('.mytext').html('Общеизвестно, что все новое - это хорошо забытое старое. В свое время в пылу реформаторства кто-то необдуманно (а может, и по иным неведомым автору причинам) отнял у суда право соединять уголовные дела в одно производство, "выплеснув ребенка из колыбели". При этом до изменений уголовно-процессуального закона суд был наделен таким правом, ибо согласно ч. 3 ст. 26 УПК РСФСР соединение и выделение дел производилось по постановлению лица, производящего дознание, следователя, прокурора либо по определению или постановлению суда.');
        $(".myfon").hide();$(".myfon:eq(0)").show();  
        

    };
    if (number==1){
        $('.mytitle').html('Жилищные дела');
        $('.mytext').html('Жилищные вопросы – это самые распространенные дела в судебной практике. С тех пор как жилье стало еще и объектом инвестиций, количество дел, связанных с недвижимостью постоянно растет. Особенно нужна помощь жилищного адвоката при покупке жилья, потому что в этой области обычно много мошенников. Самостоятельно трудно получить необходимые документы на квартиру, которую вы только собираетесь покупать. А согласно закону «Об адвокатской деятельности и адвокатуре в Российской Федерации» адвокат имеет право получать любые документы от государственных органов.');
        $(".myfon").hide();$(".myfon:eq(1)").show(); 
    };
    if (number==2){
        $('.mytitle').html('Наследственные дела');
        $('.mytext').html('Наследственное дело открывает нотариус. Это один из этапов принятия наследства. Обычно его заводят по последнему месту жительства умершего. Место жительства — это там, где была постоянная регистрация. Иногда наследственное дело открывают по месту временного пребывания или нахождения имущества. Для этого кто-то должен обратиться к нотариусу с заявлением и документами о смерти.');
        $(".myfon").hide();$(".myfon:eq(2)").show(); 
    };
    if (number==3){
        $('.mytitle').html('Семейные дела');
        $('.mytext').html('Квалифицированный юрист, владеющий нормами семейного права, может справиться с решением любых проблем в данной сфере взаимоотношений, которые связаны с заключением или расторжением брака, имущественным разделом или урегулированием споров о детях. Многие конфликты в семье удается уладить его участникам самостоятельно. Однако зачастую для более оперативного и грамотного решения проблемы обращаются к правозащитнику, который регулярно отслеживает появляющиеся изменения в законах.');
        $(".myfon").hide();$(".myfon:eq(3)").show(); 
    };
    if (number==4){
        $('.mytitle').html('Земельные споры');
        $('.mytext').html('Как бы странно это не звучало, но самой распространенной причиной нарушения границ участков земли является халатность. Именно при ненадлежащем выполнении своих обязанностей кадастровые инженеры допускают нарушения границ.');
        $(".myfon").hide();$(".myfon:eq(4)").show(); 
    };
 event.preventDefault();});

</script>
Made on
Tilda