1
2
3
4
5
6
7
8
9
10
11
12
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Tab#1
Tab#2
Tab#3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Текст
Tab#4
Tab#5
Tab#6
<style>
/*Серый цвет для иконок*/
.tabmenu7 div[data-elem-type="image"] .tn-atom {
   filter: grayscale(1);
   opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu7 div[data-elem-type="shape"] {
    transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon7, .hovericon7{
    opacity:1!important;
    filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape7, .hovershape7{
     margin-top: -20px;
}
</style>

<script>
$(document).ready(function() {
    //Прописываем класс к нашему таб-меню
    $('#rec112813476').addClass('tabmenu7');
    //Прописываем наши скрытые блоки
     var hideblock7 = ["#rec112813604","#rec112813683","#rec112813685"];
    //Добавляем классы к нашим скрытым блокам
     $(hideblock7[0]).addClass('tabcontent7');var i = 0; var number7 = 0;
     for(let i = 1; i < hideblock7.length; i++){
     $(hideblock7[i]).addClass('tabcontent7 t400__off');};  
  
    //Эффект при наведении на вкладку
     $('.tabmenu7 div[data-elem-type="button"]').hover(function(){ 
      number7 = $('.tabmenu7 div[data-elem-type="button"]').index(this);     
      $('.tabmenu7 div[data-elem-type="image"]:eq('+number7+') .tn-atom').addClass('hovericon7');
      $('.tabmenu7 div[data-elem-type="shape"]:eq('+number7+')').addClass('hovershape7');     
	  }, function(){ 
	  $('.tabmenu7 div[data-elem-type="image"]:eq('+number7+') .tn-atom').removeClass('hovericon7');
      $('.tabmenu7 div[data-elem-type="shape"]:eq('+number7+')').removeClass('hovershape7');
	  });
    //Добавляем активную вкладку при загрузке страницы
        $('.tabmenu7 div[data-elem-type="image"]:first .tn-atom').addClass('activeicon7');
        $('.tabmenu7 div[data-elem-type="shape"]:first').addClass('activeshape7');
    //При нажатии на вкладку
    $('.tabmenu7 div[data-elem-type="button"]').click(function(e) {e.preventDefault();
        //Вычисляем номер нашего таба         
        number7 = $('.tabmenu7 div[data-elem-type="button"]').index(this);
       //Удаляем классы акивного состаяния
        $('.tabmenu7 div[data-elem-type="image"] .tn-atom').removeClass('activeicon7');
        $('.tabmenu7 div[data-elem-type="shape"]').removeClass('activeshape7');
       //Делаем активным данную вкладку
        $('.tabmenu7 div[data-elem-type="image"]:eq('+number7+') .tn-atom').addClass('activeicon7');
        $('.tabmenu7 div[data-elem-type="shape"]:eq('+number7+')').addClass('activeshape7');
       //Добавляем класс скрытия для контентных блоков
       $('.tabcontent7').addClass('t400__off'); 
       //ПОказываем нужный контентый блок
       $(hideblock7[number7]).removeClass('t400__off');
});
});
</script>
<style>
/*Серый цвет для иконок*/
.tabmenu8 div[data-elem-type="image"] .tn-atom {
   filter: grayscale(1);
   opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu8 div[data-elem-type="shape"] {
    transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon8, .hovericon8{
    opacity:1!important;
    filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape8, .hovershape8{
     margin-top: -20px;
}
</style>

<script>
$(document).ready(function() {
    //Прописываем класс к нашему таб-меню
    $('#rec112814160').addClass('tabmenu8');
    //Прописываем наши скрытые блоки
     var hideblock8 = ["#rec112814169","#rec112814206","#rec112814208"];
    //Добавляем классы к нашим скрытым блокам
     $(hideblock8[0]).addClass('tabcontent8');var i = 0; var number8 = 0;
     for(let i = 1; i < hideblock8.length; i++){
     $(hideblock8[i]).addClass('tabcontent8 t400__off');};  
  
    //Эффект при наведении на вкладку
     $('.tabmenu8 div[data-elem-type="button"]').hover(function(){ 
      number8 = $('.tabmenu8 div[data-elem-type="button"]').index(this);     
      $('.tabmenu8 div[data-elem-type="image"]:eq('+number8+') .tn-atom').addClass('hovericon8');
      $('.tabmenu8 div[data-elem-type="shape"]:eq('+number8+')').addClass('hovershape8');     
	  }, function(){ 
	  $('.tabmenu8 div[data-elem-type="image"]:eq('+number8+') .tn-atom').removeClass('hovericon8');
      $('.tabmenu8 div[data-elem-type="shape"]:eq('+number8+')').removeClass('hovershape8');
	  });
    //Добавляем активную вкладку при загрузке страницы
        $('.tabmenu8 div[data-elem-type="image"]:first .tn-atom').addClass('activeicon8');
        $('.tabmenu8 div[data-elem-type="shape"]:first').addClass('activeshape8');
    //При нажатии на вкладку
    $('.tabmenu8 div[data-elem-type="button"]').click(function(e) {e.preventDefault();
        //Вычисляем номер нашего таба         
        number8 = $('.tabmenu8 div[data-elem-type="button"]').index(this);
       //Удаляем классы акивного состаяния
        $('.tabmenu8 div[data-elem-type="image"] .tn-atom').removeClass('activeicon8');
        $('.tabmenu8 div[data-elem-type="shape"]').removeClass('activeshape8');
       //Делаем активным данную вкладку
        $('.tabmenu8 div[data-elem-type="image"]:eq('+number8+') .tn-atom').addClass('activeicon8');
        $('.tabmenu8 div[data-elem-type="shape"]:eq('+number8+')').addClass('activeshape8');
       //Добавляем класс скрытия для контентных блоков
       $('.tabcontent8').addClass('t400__off'); 
       //ПОказываем нужный контентый блок
       $(hideblock8[number8]).removeClass('t400__off');
});
});
</script>
Made on
Tilda