#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#

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

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

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

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

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

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

Установка:
  1. Создать Zero блок
  2. В не создать вкладки, задав каждой последовательно класс slide1, slide2..slideN
  3. Каждой вкладке задать произвольную ссылку, например #tab
  4. Создать блоки с контентом
  5. Под последним блоком вставить скрипт в T123
  6. В скрипте заменить идентификаторы блока 959 на свои.
  7. Заменить #rec000000000 на ID первого блока (который должен показываться при открытии страницы)
<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. В не создать вкладки, задав каждой последовательно класс slide1, slide2..slideN
  3. Каждой вкладке задать произвольную ссылку, например #tab
  4. Создать блоки с контентом
  5. Под последним блоком вставить скрипт в T123
  6. Заменить #rec000000000 на ID первого блока и #recXXXXXXXX на ID других ваших блоков. Если вы хотите одновременно скрывать/показывать два или более блоков, пропишите ID через запятую, вот так $('#recXXXXXXXX, #recXXXXXXXX')
  7. Добавляете новые строки, если нужно больше вкладок.
<script>
$('#rec000000000').fadeOut(0); // вставляем ID перового блока
$('#rec000000000').attr('xslide', 'slide1');
$('#recXXXXXXXX').attr('xslide', 'slide2');
$('#recXXXXXXXX').attr('xslide', 'slide3');
$('a[xslide*="slide"]').click(function(){
  var slide = $(this).attr('xslide');
  $('[data-record-type="754"]').fadeOut(0);
  $('[xslide="'+slide+'"]').fadeIn(300); // скорость анимации (опт. 200..500)
  t_lazyload_update();
})
</script>
Made on
Tilda