1
Национальные парки и заповедники Азии
2
3
4
5
6
Рассвет , Гуанчжоу
1
Национальные парки и заповедники Азии
2
3
4
5
6
Национальный парк Чжанцзяцзе, Китай
1
Национальные парки и заповедники Азии
2
3
4
5
6
Водопад Дэтянь, Вьетнам
1
Национальные парки и заповедники Азии
2
3
4
5
6
Травертиновые террасы долины Хуанлун, Китай
1
Национальные парки и заповедники Азии
2
3
4
5
6
Храм, Камбоджа
1
Национальные парки и заповедники Азии
2
3
4
5
6
Цветение сакуры у храма, Япония

Делаем переключение между ZeroBlock собственными кнопками в Tilda

Как выполнили:

1. Создали ZeroBlock
2. Добавили в него 6 кнопок со ссылками #slide1, #slide2 ..., #slide6
3. Добавили контент и адаптировали
4. Сделали копии ZeroBlock и отредактировали контент
5. Вставили код на страницу в блок ДРУГОЕ►Т123

//Прописываем наши ID ZeroBlockov
var myzero_1 = '#rec64290757';
var myzero_2 = '#rec64301118';
var myzero_3 = '#rec64301698';
var myzero_4 = '#rec64302380';
var myzero_5 = '#rec64302755';
var myzero_6 = '#rec64304088';
<style>
/*Класс для активной кнопки*/
 .activepaginbtn {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #878787 !important;
 } 
  .piecezeroslides{
    position : absolute;
    width:100%;
  }

  .allzeroslides{
      height:700px;
  }
 
</style>

<script>
$( document ).ready(function() {

//Прописываем наши ID ZeroBlockov    
 var myzero_1 = '#rec64290757';
 var myzero_2 = '#rec64301118';
 var myzero_3 = '#rec64301698';
 var myzero_4 = '#rec64302380';
 var myzero_5 = '#rec64302755';
 var myzero_6 = '#rec64304088';
 
//Скрываем лишние блоки, кроме первого
$(myzero_1).addClass('piecezeroslides');
$(myzero_2).hide().addClass('piecezeroslides');
$(myzero_3).hide().addClass('piecezeroslides');
$(myzero_4).hide().addClass('piecezeroslides');
$(myzero_5).hide().addClass('piecezeroslides');
$(myzero_6).hide().addClass('piecezeroslides');

//Добавляем общие классы
$('.piecezeroslides').wrapAll('<div class="allzeroslides"></div>');

//Присваиваем класс нашим кнопкам
$('[href = "#slide1"]').addClass("paginbtn mode1 activepaginbtn");
$('[href = "#slide2"]').addClass("paginbtn mode2");
$('[href = "#slide3"]').addClass("paginbtn mode3");
$('[href = "#slide4"]').addClass("paginbtn mode4");
$('[href = "#slide5"]').addClass("paginbtn mode5");
$('[href = "#slide6"]').addClass("paginbtn mode6");

//Функция скрытия блоков
function slideUpzero(){
$(myzero_1).fadeOut(1800);
$(myzero_2).fadeOut(1800);
$(myzero_3).fadeOut(1800);
$(myzero_4).fadeOut(1800); 
$(myzero_5).fadeOut(1800); 
$(myzero_6).fadeOut(1800); 
    
};

//При клике на кнопку 1
$( ".mode1" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn");  
  //Добавляем к нажатой состояние активности
  $(".mode1").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_1).fadeIn(1800);
  t396_init('64290757'); return false;
});

//При клике на кнопку 2
$( ".mode2" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}    
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn"); 
  //Добавляем к нажатой состояние активности
  $(".mode2").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_2).fadeIn(1800);
  t396_init('64301118');  return false;
});

//При клике на кнопку 3
$( ".mode3" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}  
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn"); 
  //Добавляем к нажатой состояние активности
  $(".mode3").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_3).fadeIn(1800);
  t396_init('64301698');  return false;
  
});

//При клике на кнопку 4
$( ".mode4" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();} 
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn"); 
  //Добавляем к нажатой состояние активности
  $(".mode4").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_4).fadeIn(1800);
  t396_init('64302380');  return false;
});

//При клике на кнопку 5
$( ".mode5" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}     
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn"); 
  //Добавляем к нажатой состояние активности
  $(".mode5").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_5).fadeIn(1800);
  t396_init('64302755');  return false;
});

//При клике на кнопку 6
$( ".mode6" ).click(function() {
  //Запускаем функцию скрытия блоков если кнопка не выделена
  if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}     
  //Снимаем все классы активных кнопок 
  $(".paginbtn").removeClass("activepaginbtn"); 
  //Добавляем к нажатой состояние активности
  $(".mode6").addClass("activepaginbtn");
  //Показываем нужный блок
  $(myzero_6).fadeIn(1800);
  t396_init('64304088');  return false;
});

});
</script>
Made on
Tilda