К основному контенту

1 мин

Zeroblock

Light

5

Этот скрипт позволит тебе сделать любое количество независимых друг от друга табов, по нажатию кнопки включить отображение блоков или переключить их стрелками на Тильде. Модификация совместима с Autoscale.

Как сделать вкладки для переключения любых блоков?

(cвернуть)
Инструкция
Обновление от 02.05.23 - Изменен класс который назначается для кнопок табов и убрана необходимость делать кнопки в отдельном зеро, поэтому класс для кнопок отличается от видео, см. инструкцию ниже ↓
tabbtn1-1
tab1next
111111111,[222222,3333333],444444
tabdrop1

1. Создай в зероблоке нужно количество кнопок\шейпов\того, что будет табами

2. Задай каждому из этих элементов класс tabbtn и припиши порядковый номер табов (т.е. одни табы это один сгенерированный код) и через черту порядковый номер твоего таба (т.е. tabbtn1-1 это первая кнопка первых табов, tabbtn1-2 вторая и тд)

3. Если нужно открывать вкладку по ссылке, то задай кнопкам переключения обычную якорную ссылку (т.е. #tab1 #pervaya и какую душе угодно. Главное чтобы с такой ссылкой была только одна кнопка)

4. Укажи порядковый номер табов на странице в генераторе

5. При необходимости настрой цвета активного таба и \ или подчеркивания активного таба. Если тебе не нужно изменять их, оставь поля пустыми

6. Если будешь делать кнопки переключения между табами, задай им классы tabprev и tabnext и тоже пропиши в них порядковый номер в середину класса (например tab1prev это кнопка назад для первых табов, tab2next - это кнопка вперед для вторых)

7. Если тебе нужно переключать вкладки выпадающим списком, то создай в зеро форму, добавь туда dropdown и задай форме класс tabdrop, указав в конце порядковый номер табов на странице (т.е. tabdrop1 это выпадашка для первых табов на странице и тд):

Также в таком варианте всё-равно не забудь создать кнопки, т.к. выпадающий список всё-равно будет кликать по кнопкам, просто если они тебе не нужны то можешь убрать их за пределы видимости в твоём зероблоке

8. Если тебе нужно ограничить работу табов по разрешению экрана, то укажи соответствующие границы в генераторе (можно сделать как ограничение только "до" или только "после", так и оба сразу)

9. Если тебе нужно использовать вкладки внутри других вкладок, то следуй этим шагам:

  • Создай сначала главные табы, которые должны переключать блоки с второстепенными табами внутри себя
  • При генерации кода главных табов, укажи в поле "номера табов внутри этих..." все порядковые номера второстепенных табов (например главные табы у меня первые на странице и внутри себя они должны будут переключать ещё 2-е и 3-и второстепенные табы, значит в это поле я пишу - 2,3 и отмечаю чекбокс "выбери этот пункт если будешь использовать мои табы ...")
  • Далее создай второстепенные табы, которые будут преключаться внутри главных
  • Помести код главных табов ниже второстепенных и всех переключаемых ими блоков

10. Если тебе нужно показывать по одной кнопке несколько блоков, то возьми все эти несколько блоков в квадратные скобки вот так

В этом примере по первой кнопке tabbtn1-1 будет показан блок 111111, а по tabbtn1-2 блоки 222222 и 333333 одновременно

11. Скопируй код и вставь в блок т123 ПОСЛЕ всех вкладок

- Модификация не совместима с basic animation в переключаемых табами Zero

- После обновления кнопки переключения табов можно добавлять в сами табы, чтобы они "переключали блоки сами с собой". В этом случае можно просто сначала создать кнопки в первом табе, а потом отдублировать его, меняя только контент

- Не задавай в стандартных настройках блока ограничение в зависимости от разрешения тем блокам, которые должны переключаться табами, иначе они не будут скрываться при переключении. Для того чтобы задать ограничение, воспользуйся настройками в генераторе

Важно!

undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Скопировать код
<!--Библиотека VORON--><!--Вкладки из зеро https://voron-dev.ru/tabs--> <script>
  let blocks1 = ['#rec12345678' ];
  let buttons1 = document.querySelectorAll('div[class*="tabbtn1"]');
  
  function show1(e) {
  
  
  blocks1.forEach(element => {
    if (Array.isArray(element)) {
      element.forEach(subElement => {
        document.querySelector(subElement).classList.remove('v-activetab');
      });
    } else {
      document.querySelector(element).classList.remove('v-activetab');
    }
  });
  buttons1.forEach(element => {
    element.classList.remove('v-activebtn1');
  });
  document.querySelectorAll('.tabbtn1-' + e.attributes.num.value).forEach(element => {
    element.classList.add('v-activebtn1');
  });
  const targetBlock = blocks1[parseFloat(e.attributes.num.value) - 1];
  if (Array.isArray(targetBlock)) {
    targetBlock.forEach(subElement => {
      document.querySelector(subElement).classList.add('v-activetab');
    });
  } else {
    document.querySelector(targetBlock).classList.add('v-activetab');
  };
            if (typeof t_lazyload_update !== "undefined") t_lazyload_update(); if ((document.querySelector('.js-product.t-store__card') || document.querySelector('.v-activetab [data-elem-type="gallery"]')) && !document.querySelector('.slick-slider')) window.dispatchEvent(new Event('resize'));
  };
  t_onReady(function () {
  t_onFuncLoad('t396_init', function () {
  
  blocks1.forEach(function(element) {
    if (Array.isArray(element)) {
      element.forEach(subElement => {
        document.querySelector(subElement).classList.add('v-inactive');
      });
    } else {
      document.querySelector(element).classList.add('v-inactive');
    }
  });
  buttons1.forEach((element) => {
  element.setAttribute('num', element.classList[2].split('-')[1]);
  if (parseFloat(element.classList[2].split('-')[1]) === 1) {
  element.classList.add('v-activebtn1');
  };
  element.addEventListener('click', function() {show1(this)}, true);
  });
  document.querySelector('.tabbtn1-1').click();
  if (window.location.hash && window.location.hash.indexOf('/tab/') === -1) document.querySelector('[class*="tabbtn"] a[href="' + window.location.hash + '"]').click();
  let sel = 0;
  const selectElements = document.querySelectorAll('.tabdrop1 select');
  if (selectElements.length > 0) {
    selectElements.forEach(function(selectElement) {
    selectElement.closest('form').querySelector('.tn-form__submit').remove();
      selectElement.addEventListener('change', function(e) {
        sel = this.selectedIndex;
        const tabButton = document.querySelector('.tabbtn1-' + (sel + 1));
        if (tabButton) tabButton.click();
        selectElements.forEach(function(selectElement) {
          selectElement.selectedIndex = sel;
        });
      });
    });
  }
  })
  })
  </script> <style>
  div[class*="tabbtn"], div[class*="prev"], div[class*="next"] {
  cursor: pointer;
  }
  .v-inactive {
  display: none !important;
  }
  .v-activetab {
  display: block !important;
  }
  .v-activebtn1 .tn-atom {
  
  
  
  
  
   }
  </style>
  
123

Табы назначенны на кнопки. В переключаемых зеро задана sbs animation по element on screen. Выставлен белый фон и черный цвет текста для активной кнопки таба. Включен режим повышенной совместимсти с ст. блоками

Примеры работы модификации
Tab 1
Tab 2
Tab 3
Tab 4
Zero Block 1
Tilda Publishing
create your own block from scratch
Zero Block 2
Tilda Publishing
Теперь кнопок может быть сколько угодно и они могут быть в самих табах
Tab 1
Tab 2

Табы назначенны на кнопки. Под табами в зеро добавлена белая линия. Для активной кнопки таба задано белое подчёркивание с высотой в 3 рх

Примеры работы модификации
Tab 1
Tab 2
Tab 3
Tab 4
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 3
There is no design without discipline. There is no discipline without intelligence.
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 3
Everything should be made as simple as possible, but not simpler.
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 3
Lorem ipsum lorem shmipsum lorem gigaipsum
В этом примере табы добавлены в каждый из переключаемых блоков и фактически они "переключают сами себя". Сначала был создан один зеро и потом откопирован с заменой контента справа
Пример работы модификации 3
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.

Те же табы, что и в примере 2, но со включенным режимом "добавить переключение кнопками". В зеро включен Autoscale

Примеры работы модификации 4
Tab 1
Tab 2
Tab 4
Zero Block 1
Tilda Publishing
create your own block from scratch
Те же табы, что и в примере 2, но со включенным режимом "табы внутри табов".
Tab 1
Tab 2
Tab 4
Пример работы модификации 5
Zero Block 1.1
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.2
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.3
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 1.4
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 1.1
Tab 1.2
Tab 1.4
Zero Block 2.1
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.2
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.3
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 2.4
Это табы в табах:)
Tilda Publishing
create your own block from scratch
Tab 2.1
Tab 2.2
Tab 2.3
Tab 2.4
Zero Block 3
Tilda Publishing
create your own block from scratch
Zero Block 4
Tilda Publishing
create your own block from scratch