Вкладки и табы из zero block в Tilda

Скрываем и показываем блоки по клику в Tilda

AnKu разработка сайтов на тильда, модификации тильда, уроки tilda
Я не знаю, что еще лучше привлечет ваше внимание, чем это красное поле...
Убедительная просьба, прочитайте статью, а не бездумно вставляйте код. Если у вас что-то не работает - это 99,99% потому что вы не внимательно прочитали или вовсе не прочитали текст. Я отвеаю многим людям и почти в 100% виновата невнимательность.

Так же, напоминаю! Если есть вопрос, что-то не работает, не получается, нужно переделать или адаптировать код к вашему проекту, пожалуйста, напишите в ЛС в вк, там я увижу сообщение.
Если поставили код, а он не работает, не полуилось у вас, то с вопросом, скидывайте ссылку на страницу своего проекта.

Текст комментария "А я поставил, а не работает" - не может дать мне понять, что же конкретно произошло и что у вас не работает, а страницу я могу проинспектить и понять, где вы накосячили.
Ещё один способ скрывать блоки по клику на кнопки в Tilda. Данный пример подойдет для тех кто хочет сделать много вкладок. Основан он на jQuery плагине Owl Carousel. Да, фактически это слайдер, но функцию вкладок и табов он выполняет, слайды сменяют друг друга только при клике на назначенный вами триггер.
Плюс данного метода в том, что мы можем делиться ссылкой и при открытии сразу будет показана нужная вкладка.
Минусы - скрипт конфликтует с блоком плавного скролла

Пример

В примере я буду использовать 2 блока навигации - стандартный блок меню ME606 и кнопки в Zero block. В качестве блоков с контентом можно использовать как стандартные блоки, так и Zero block. Я же просто размещу Zero с иллюстрациями, которые рисовал ранее.

С активным классом кнопки

По просьбе из комментов, ниже кнопки с активным классом и скрипт ниже основного кода, кнопки в zero, присвоен класс tb

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

  1. Создаем блок навигации (табы) - любые кнопки, как в стандартном, так и в Zero block
  2. Создаем блок T123, вставляем в него первый код
  3. Создаем блоки с контентом
  4. Создаем ещё один T123, вставляем в него скрипт
  5. Заменяем id блоков на свои
  6. Создаем третий T123, добавляем скрипт
  7. Заменяем id блоков, присваиваем названия ссылок
  8. Добавляем названия ссылок на свои кнопки (ссылки вида #link)
<!-- Область слайдера-->
<!-- В этом блоке будут плавать твои слайды или скрытые блоки -->
<!-- Это первый Т123 -->
<div class="tabs-slider-wrapper"></div>
<!-- Это второй Т123-->
<!-- Тут ничего не меняешь-->
<!-- Стили плагина owl carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- Скрипт плагина owl carousel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Тут вставляешь id блоков-->
<script>
  $(document).ready(function() {
    var block = $('#rec331251923'); //id  Т123 область слайдера (тот т123 который был выше)
    var wrap = $('.tabs-slider-wrapper');
    var slides = $('#rec331252325, #rec331253557, #rec331255351, #rec331255438, #rec331256023, #rec331256771, #rec331257477'); // id Zero block слайдов (скрытых блоков)

//ниже ничего не меняешь
    wrap.append('<div class="owl-carousel owl-theme"></div>');
    slides.appendTo(block.find('.owl-carousel'));
    var owl = wrap.find('.owl-carousel').owlCarousel({
      loop: true,
      center: false,
      touchDrag: false,
      pullDrag: false,
      freeDrag: false,
      dots: false,
      center: false,
      nav: false,
      margin: 0,
      mouseDrag: false,
      touchDrag: false,
      autoHeight: true,
      URLhashListener: true,
      startPosition: 'URLHash',
      responsive: {
        0: {
          items: 1
        },
        640: {
          items: 1
        },
        1000: {
          items: 1
        },
      }
    })
  });
</script>
<!-- Это третий Т123
Тут пишешь id zero блоков, которые слайды и назначаешь им ссылки. 
Сейчас там стоят порядковые номера, но можешь что угодно в кавычки вписать
Потом по этой ссылке будет вызываться слайд
Ссылки будут #first или #1 или #tvoy-variant
Ссылку можешь зацепить за любую кнопку или что угодно
Пример вверху на основе меню и на основе zero
Скрытыми могут быть любые блоки, как зеро, так и обычные-->

<script>
//id блока с контентом, потом ссылка, по которой появляется блок
  $("#rec331252325").attr("data-hash", "first");
  $("#rec331253557").attr("data-hash", "second");
  $("#rec331255351").attr("data-hash", "third");
  $("#rec331255438").attr("data-hash", "fourth");
  $("#rec331256023").attr("data-hash", "fifth");
  $("#rec331256771").attr("data-hash", "sixth");
  $("#rec331257477").attr("data-hash", "seventh");
</script>
<script>
$(document).ready(function() {
  var location = window.location.href;
  var active = '#' + location.split('#').pop();
  $('.tb').each(function() {
    var link = $(this).find('a').attr('href');
    if (location != link) {
      $('.tb').first().addClass('active');
    }
    if (active == link) {
      $(this).addClass('active');
    } else {
      $(window).bind('hashchange', function() {
        var location = window.location.href;
        var active = '#' + location.split('#').pop();

        $('.tb').each(function() {
          var link = $(this).find('a').attr('href');

          if (active == link) {
            $(this).addClass('active');
          } else {
            $(this).removeClass('active');
          }
        });
      });
    }
  });
});
</script>

<!--Стиль активной кнопки-->
<style>
  .tb.active .tn-atom {
    background-color:#000!important;
  }
</style>
Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)
AnKu
Тот, кто пишет
Нужен видео разбор?
Прежде чем ткнуть, сформулируй вопрос: "Что конкретно не получается?" и напиши его в форму комментариев ниже!
Не нашли что искали?
Напишите свой вопрос или предложение через форму ниже
Понравился материал? Поблагодари проект!
Смайл иллюстрации от AnKu
first
Смайл иллюстрации от AnKu
second
second
Смайл иллюстрации от AnKu
third
fourth
fifth
Made on
Tilda