Табы на JQuery и JavaScript

Источник: https://dev-postnov.ru/tabs-on-javascript-jquery/

Всем привет, друзья!
Сегодня разберем как делаются вкладки(табы) на JQuery и JavaScript .

https://www.youtube.com/watch?v=6Nvf23aDGIo

Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery , ниже JavaScript.

В самом начале объясню схему, по которой мы будем делать табы:

  1. Добавим вкладкам и блокам с их содержимым классы с приставкой js- для обращения к ним из JavaScript.
  2. Добавим data атрибут data-tab для идентификации наших табов. Некоторые делают табы по индексу элемента в dom-дереве, я так делать не буду, это не гибкая конструкция.
  3. При клике на вкладку, удалим активный класс у всех вкладок, добавим той, по которой кликнули, удалим активный класс у всех блоков с содержимым и добавим тому, у которого значение атрибута data-tab такое же как у атрибута data-tab нашей вкладки.

Про приставку js.
Мы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.

В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.

Первым делом создадим разметку для наших табов.

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

Стили:

Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.

Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.

Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.

Разберем Jquery код:

Итак, первое что нужно сделать, обработак клик по каждому элементу.

Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.

  1. Получили значение атрибута data-tab у текущего элемента
  2. Здесь происходит конкатенация (соединение) строк. В селекторе jquery мы разрываем строку и вставляем туда значение нашей переменной id с помощью операторов сложения “+”. Если вы складываете строки, оператор “+” соединит их. В результате конкатенации строк мы получили такой селектор: ‘.js-tab-content[data-tab=”3"]’ (содержимое data-tab меняется в зависимости от вкладки).
    Подробнее здесь.

Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.

  1. Удалили класс active у активной вкладки
  2. Добавили класс active вкладке по которой кликнули
  3. Удалили класс active у активного контейнера с содержимым
  4. Добавили класс active контейнеру который должен быть активным

Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.

Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.

Разберем JavaScript код:

Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.

Теперь можно обработать клик по вкладкам.

  1. Циклом перебираем элементы в массива. В массиве у нас лежат dom-элементы, то есть наши вкладки.
  2. Каждому элементу добавляем функцию-обработчик при событии клика.

Теперь в функции-обработчике объявим несколько переменных для удобной манипуляции. Все можно сделать и без переменных, но мы будем делать по-хорошему.

  1. Получаем идентификатор вкладки.
  2. Ищем контейнер с таким же значением атрибута data-tab.
  3. Ищем активную вкладку.
  4. Ищем активный контейнер.

В заключении поработаем с классами:

  1. Удалили класс active у активной вкладки
  2. Добавили класс active вкладке по которой кликнули
  3. Удалили класс active у активного блока с содержимым
  4. Добавили класс active контейнеру который должен быть активным

Вот и все! Спасибо вам за прочтении статьи.
Если понравилось — поставьте лайк, если нет — напишите почему в комментариях.

Помог? Подпишись на блог: vk.com/postnov_design

--

--

Develop website design and complex interfaces

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store