Как создать зависимые вкладки в Tilda
SMART | REPAIR
Ремонт смартфонов за 40 минут в Вашем присутствии

Гарантия 320 дней на все работы
Цены на ремонт смартфонов
Retina A1534
A1370 2010-2012
A1466 2012-2013
A1465 2012-2013
A1466 2012-2013
A1466 2013-2015
A1278 2008-2012
A1286 2008-2012
A1297 2009-2012
A1425 2012-2013
A1502 2013-2015
A1398 2012-2013
A1398 2013-2015
  • iPhone 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 4s
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 5
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 5s
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 5c
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 6
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 6 Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 6s
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 6s Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone SE
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 7 Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 8
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone 8 Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPhone X
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad 3
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad mini
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad Air
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad mini Retina
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad mini 3
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad Air 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad Pro 9.7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad mini 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad Pro 12.9
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • iPad Pro 10.5
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Retina 12" Retina A1534
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Air 11 " A1370 2010-2012
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Air 13 " A1466 2012-2013
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Air 11 " A1465 2012-2013
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Air 13 " A1466 2012-2013
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Air 13 " A1466 2013-2015
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 13 " A1278 2008-2012
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 15 " A1286 2008-2012
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 17 " A1297 2009-2012
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 13 " A1425 2012-2013
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 13 " A1502 2013-2015
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 15 " A1398 2012-2013
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • MacBook Pro 15 " A1398 2013-2015
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S6
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S6 Edge
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S6 Edge Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy A3 2016
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy A5 2016
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S7 Edge
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S8
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy S8 Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy A3 2017
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Galaxy A5 2017
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi A1
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 5S
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 5
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 5S Plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi Mix 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi Note
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi Note 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 4i
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 4C
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Mi 6
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 3
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 3S
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 4A
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 4X
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi Note 2 Prime
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi Note 3
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi Note 4
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi Note 4X
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Redmi 4 Pro/Prime
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu MX4 PRO
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu U10
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu M5
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu M5 Note
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu M3 Note
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Meizu MX2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P8 Lite
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P9 Lite
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Ascend Mate 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Ascend Mate 7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P10
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P10 Lite
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Ascend P7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Y5 II
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Nova
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei Nova 2
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P20 Lite
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Huawei P9 Lite (2017)
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 5A
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 5C
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 3C Lite
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 3X
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 4C Pro
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 4X
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 6A
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 6C
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 6 plus
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 7
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 8
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
  • Honor 9
    Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.

Как создать зависимые вкладки в Tilda

1
Создали ZeroBlock для вкладок с названиями брэндов
2
Добавили в него 8 элементов Text для названий брэндов и задали для них ссылку #brandname
3
Создали 8 ZeroBlock, в каждом добавили нужное кол-во элементов Button и задали всем ссылку # (просто решётка)
4
Далее просто монотонно создавали блоки с контентом для каждой модели.
На примере использовали FR102 - 102 штуки
5
Добавили код на страницу
Код вставляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём вкладки в два уровня с использованием ZeroBlock.
Длительность видео: 27 мин
Фрагмент видео
Библиотека для примера

<!-- ВИЗУАЛЬНЫЕ НАСТРОЙКИ БЛОКА БРЭНДОВ И НАСТРОЙКИ БЛОКА МОДЕЛЕЙ -->
<style>
/*Время и вид анимации для вкладок*/
  .brandname{
      transition:all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
/*Стиль веделенной вкладки - брэнды*/  
  .brandnameactive{
      text-decoration:underline  !important;
      font-weight:600  !important;
  } 
/*Цвет текста при наведении на брэнды*/  
   .brandname:hover{
      color:#000000 !important;
  }
/*Время и вид анимации для вкладок Моделей*/
  .modelblock a{
      transition:all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
/*Стиль веделенной вкладки - Модели*/  
  .modelactive{
      border-color: #3e618c !important;
      font-weight:600  !important;
  } 
/*Стили при наведении на модели*/  
   .modelblock a:hover{
      border-color: #3e618c !important;
      font-weight:600  !important;
  }
</style> 

<!--ЗАДАЁМ ID НАШИХ БЛОКОВ -->
<script>
    $( document ).ready(function() {
//ВВОДИМ ID БЛОКОВ ДАННЫХ
//Записываем ID блоков с выбором моделей девайсов iPhone iPad MacBook Samsung Xiaomi Meizu Huawei Honor      
    var modelid = ["#rec85895701" , "#rec85905437", "#rec86135991", "#rec86169869", "#rec86219888", "#rec86238176", "#rec86256660", "#rec86259281"];
    //Создаём массив состояний для контента       
    var modelactive = [];    

//Записываем ID блоков c контентом
     var modelcontent = [
   //Для IPHONE         
	['#rec86067695','#rec86067942','#rec86077296','#rec86077724','#rec86077899','#rec86078125','#rec86078194','#rec86078373','#rec86078990','#rec86079179','#rec86079247','#rec86079336','#rec86079375','#rec86079443','#rec86079521' ],
   //Для IPAD
	['#rec86069935','#rec86069974','#rec86122429','#rec86122536','#rec86122546','#rec86125424','#rec86125490','#rec86125595','#rec86125683','#rec86125805','#rec86125927','#rec86126027'],
   //MACBOOK
   ['#rec86154560','#rec86154899','#rec86155152','#rec86155262','#rec86155344','#rec86156582','#rec86156911','#rec86157677','#rec86157851','#rec86158391','#rec86159208','#rec86159542','#rec86159783'],
   //SAMSUNG
   ['#rec86171503','#rec86171697','#rec86171850','#rec86171989','#rec86172221','#rec86172313','#rec86172492','#rec86172759','#rec86172906','#rec86173061','#rec86173137'],
   //XIAOMI
   ['#rec86230124','#rec86230471','#rec86230557','#rec86230655','#rec86230850','#rec86231198','#rec86231328','#rec86231578','#rec86231669','#rec86231750','#rec86231954','#rec86232222','#rec86232389','#rec86232488','#rec86232644','#rec86232763','#rec86232903','#rec86233047','#rec86233234','#rec86235061','#rec86235318'],
   //MEIZU	
   ['#rec86255454' , '#rec86255566','#rec86255705','#rec86255866','#rec86255946','#rec86256045'],
   //HUAWEI
   ['#rec86257299','#rec86257398','#rec86257459','#rec86257604','#rec86257658','#rec86257726','#rec86257899','#rec86258023','#rec86258177','#rec86258260','#rec86258299','#rec86258352'],
   //HONOR
   ['#rec86259947','#rec86260004','#rec86260185','#rec86260313','#rec86260380','#rec86260470','#rec86260561','#rec86260679','#rec86260730','#rec86260789','#rec86260834','#rec86260879']

];

//ПРОИЗВОДИМ РАЗМЕТКУ БЛОКОВ
//ДЕВАЙСЫ
//Добавляем классы ко всем блокам с моделями девайсов
   for(let i = 0; i < modelid.length; i++){
     $(modelid[i]).addClass('modelblock');
     //Заполняем массив стартовых состояний для контента
     modelactive[i]=0;    
     //Добавляем стиль выделения первой вкладки у каждого блока с девайсами
     $(modelid[i]+' a:eq(0)').addClass('modelactive');};  
//Скрываем все блоки с моделями девайсов , кроме первого   
   $('.modelblock').not('.modelblock:eq(0)').hide();
   $('.modelblock:eq(0)').addClass('modelshowblock');

//НАСТРОЙКА БЛОКОВ С КОНТЕНТОМ О ДЕВАЙСАХ
$.each(modelcontent,function(key,data) {
  $.each(data, function(index,value) {
  $(modelcontent[key][index]).addClass('devcontentblock');
  }); });
//Скрываем все блоки с контентом о девайсах , кроме первого   
   $('.devcontentblock').not('.devcontentblock:eq(0)').hide();  

//УПРАВЛЕНИЕ ВКЛАДКАМИ БРЭНДОВ    
    //ПРисваиваем всем текстовым объектам с этой ссылкой этот класс   
   $('[href="#brandname"]').addClass('brandname');
//Делаем выделенную первую вкладку   
   $('.brandname:eq(0)').addClass('brandnameactive');
   //Объявляем порядковую переменную  
   var numberbrand = 0;  
   //При клике на брэнд
 $('.brandname').click(function(event) {
   //Выясняем порядковый номер вкладки
       numberbrand = $(".brandname").index(this);
      
  //Скрываем блоки с моделями девайсов
     $('.modelblock').removeClass('modelshowblock').hide();
     $('.modelblock:eq('+numberbrand+')').addClass('modelshowblock').show();
  //Убираем стиль выделения с активной вкладки      
       $('.brandname').removeClass('brandnameactive');
  //Активируем ту вкладку , на которую кликнули
       $('.brandname:eq('+numberbrand+')').addClass('brandnameactive');
   //Скрываем блоки с контентом о девайсах и показываем нужный
   $('.devcontentblock').hide();
   $(modelcontent[numberbrand][modelactive[numberbrand]]).show();
   
   //Инициализация слайдеров 
   var recid = modelcontent[numberbrand][modelactive[numberbrand]] ; 
   recid = recid.substr(4);
   t_slds_updateSlider(''+recid+'');
   t_slds_positionArrows(''+recid+'');
   
event.preventDefault();     
 });

//УПРАВЛЕНИЕ ВКЛАДКАМИ ДЕВАЙСОВ    
//Объявляем порядковую переменную  для кнопок в блоках с девайсами
      var numbermodel = 0;
      var numbeactiveblock = 0;
   //При клике на кнопку девайса
 $('.modelblock a').click(function(event) {
   //Вычисляем ID блока, в котором был клик
      var clickId = '#'+$(this).parent('.t396__elem').parent('.t396__artboard').parent('.t396').parent('.modelblock').attr('id');
    //  console.log(clickId);
  //Выясняем порядковый номер вкладки
      numbermodel = $(clickId+' a').index(this);
  //Убираем стиль выделения с активной вкладки      
       $(clickId+' a').removeClass('modelactive');
  //Активируем ту вкладку , на которую кликнули
       $(clickId+' a:eq('+numbermodel+')').addClass('modelactive');
  
  //Скрываем блоки с контентом о девайсах и показываем нужный
   $('.devcontentblock').hide();
   $(modelcontent[numberbrand][numbermodel]).show();
  //Запоминаем выбрвнную вкладку девайса для акивного бренда 
   modelactive[numberbrand] = numbermodel;
   
    //Инициализация слайдеров 
   var recid = modelcontent[numberbrand][numbermodel] ; 
   recid = recid.substr(4);
   t_slds_updateSlider(''+recid+'');
   t_slds_positionArrows(''+recid+'');
   
   event.preventDefault();  
});
});          
</script>                  
Made on
Tilda