+
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#

Вкладки в Zero блок для управления любыми блоками

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

Сценарии использования разнообразные. В роле вкладок могут выступать кнопки, шейпы, текст.
Управлять можно любым блоком.

Чтобы сделать горизонтальный скролл в мобильной версии смотрите Горизонтальный скролл в Zero блоке

Версия для однотипных последовательных блоков

Применяется, когда используете один и тот же блок, причем порядок блоков совпадает с порядком вкладок.

Установка:
  1. Создать Zero блок
  2. В Zero блоке создать вкладки, задав каждой последовательно класс slide1, slide2..slideN
  3. Каждой вкладке задать произвольную ссылку, например #tab
  4. Создать блоки с контентом
  5. Под последним блоком вставить скрипт в T123
  6. В скрипте заменить идентификаторы блока 959 на свои.
  7. Заменить #rec000000000 на ID первого блока (который должен показываться при открытии страницы)

<!-- https://ilda.top/zero-tabs -->

<script>
$('[data-record-type="959"]:not("#rec000000000")').fadeOut(0); // вставляем ID перового блока
for (let i = 0; i < 6; i++) {
  $('[data-record-type="959"]:eq('+i+')').attr('xslide', 'slide'+i+'')
  $('.t396__elem.slide'+i+' a').attr('xslide', 'slide'+i+'')
}
$('a[xslide*="slide"]').click(function(){
  var slide = $(this).attr('xslide');
  $('[data-record-type="959"]').fadeOut(200);
  $('[xslide="'+slide+'"]').fadeIn(300); // скорость анимации (опт. 200..500)
  t_lazyload_update();
})
</script>

Версия для любых блоков

Применяется, когда используете один и тот же блок, причем порядок блоков совпадает с порядком вкладок. Версия для вкладок на основании єлемента Кнопка

Установка:
  1. Создать Zero блок
  2. В не создать вкладки, для всех кнопок общий класс slidebtn
  3. Для каждой кнопки поочередно ссылку #slide1, #slide2..#slideN
  4. Создать блоки с контентом
  5. Под последним блоком вставить скрипт в T123
  6. Для каждого блока поочередно задать класс slide1, slide2..slideN. Если нужно чтобы показывались 2 (или более) блоков вместе, задаете им общий класс, к примеру slide2
  7. Наслаждайтесь магией =)

<!-- https://ilda.top/zero-tabs -->

<style>
.bactive {
  background: #fff705; /* цвет фона */
  border-color: #010105 !important /* цвет обводки */
}
</style>

<script>
$('[class*="uc-slide"]').not('.uc-slide1').fadeOut(0);
$('[href="#slide1"]').addClass('bactive')
$('.slidebtn a').click(function() {
  $('.slidebtn a').removeClass('bactive')
  $(this).addClass('bactive')
  var slide = $(this).attr('href').slice(1);
  $('[class*="uc-slide"]').fadeOut(0);
  $('.uc-' + slide + '').fadeIn(0); // скорость анимации (опт. 200..500)
  t_lazyload_update();
})
</script>

Список изменений

28.08.2022
  1. Заменена скрипт "Версия для любых блоков", с учетом функции добавления класса для блока
  2. Добавлена подсветка активной кнопки
  3. Изменено описание процесса установки
09.03.2023
  1. Исправление в п. 3 (slide1, slide2..slideN → #slide1, #slide2..#slideN)
Made on
Tilda