<!--ЗАДАЁМ ID НАШИХ БЛОКОВ -->
<script>
    $( document ).ready(function() {
//ВВОДИМ ID БЛОКОВ ДАННЫХ
//Записываем ID блоков с выбором городов Мекка Медина      
    var modelid = ["#rec820621126" , "#rec820621127"];
    //Создаём массив состояний для контента       
    var modelactive = [];    
 
//Записываем ID блоков c контентом
     var modelcontent = [
   //Для Мекка         
    ['#rec820621141','#rec820621142','#rec820621143','#rec820621145','#rec820621146'],
   //Для Медина
    ['#rec820621147','#rec820621148','#rec820621149','#rec820621151','#rec820621152']
 
];
 
//ПРОИЗВОДИМ РАЗМЕТКУ БЛОКОВ
//ДЕВАЙСЫ
//Добавляем классы ко всем блокам с моделями девайсов
   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();
    
   t_lazyload_update();
    
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;
    
   t_lazyload_update();
    
   event.preventDefault();  
});
});          
</script>