Главная » Делаем табы (переключаемые вкладки) для сайта

Делаем табы (переключаемые вкладки) для сайта


24.04.2021, 07:50
1. Создаём родительский блок с классом tabs, внутри которого помещаем блок с заголовками будущих табов. Блоку с заголовками присвоим класс tabs_header

Код

  <div class="tabs"> /* родительский блок */
  <div class="tabs_header"> /* блок для заголовков табов */
   
  </div>
  </div>

Помещаем внутрь блока с классом tabs_header три заголовка для табов. Заголовки у нас будут представлять собой блоки div с классом title_header_tabs.
Кроме того, для первого заголовка дополнительно добавим класс active.

Логика такая: для содержимого блока с заголовком, имеющим класс active, динамически скриптом будет добавляться класс show, который отвечает за показ содержимого этого блока, для всех остальных блоков будет добавляться класс hide, скрывающий их содержимое.

Код

  <div class="tabs">
  <div class="tabs_header">
  <div class="title_header_tabs active">Вкладка 1</div>
  <div class="title_header_tabs">Вкладка 2</div>
  <div class="title_header_tabs">Вкладка 3</div>
  </div>
  </div>

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

Код

  <div class="tabContent">
  <h2>Заголовок</h2>
  <img src="здесь адрес изображения" alt="">
  <p>Здесь какой-то текст</p>
  </div>

Получаем такую структуру:

Код

  <div class="tabContent">
  <h2>Заголовок</h2>
  <img src="img/1.jpg" alt="">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
  </div>

  <div class="tabContent">
  <h2>Заголовок</h2>
  <img src="img/2.jpg" alt="">
  <p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
  </div>

  <div class="tabContent">
  <h2>Заголовок</h2>
  <img src="img/3.jpg" alt="">
  <p>Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </div>

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

А это значит, что необходимо написать две функции: одна, скрывающая контент табов, другая показывающая.

Для начала, назначаем обработчик события для глобального объекта window, чтобы код JavaScript начинал свою работу только после того как загрузится DOM-дерево страницы сайта

Код

window.addEventListener('DOMContentLoaded', () => {

});

Внутри callback-функции будем писать код нашей программы. И для начала получаем все необходимые для работы элементы со страницы:

Код

window.addEventListener('DOMContentLoaded', () => {

  const tabs = document.querySelectorAll('.title_header_tabs'); /* получаем все заголовки табов */
  const tabsContent = document.querySelectorAll('.tabContent'); /* получаем содержимое всех табов */
  const tabsParent = document.querySelector('.tabs_header'); /* получаем блок, содержащий все заголовки табов */

});

Пишем наши две функции, hideTabContent() и showTabContent()

Код

  /* Функция для скрытия табов */

  function hideTabContent() {
  tabsContent.forEach(item => {
  item.classList.add('hide');
  item.classList.remove('show', 'fade');
  });

  tabs.forEach(item => {
  item.classList.remove('active');
  });
  }

  /* Функция, показывающая табы */

  function showTabContent(i = 0) {
  tabsContent[i].classList.add('show', 'fade');
  tabsContent[i].classList.remove('hide');
  tabs[i].classList.add('active');
  }

Логика функции hideTabContent() : для блоков с содержимым всех вкладок мы добавляем класс hide, который их все скрывает, и удаляем класс show, отвечающий за показ, а также удаляем класс active для заголовков табов (конкретно, для заголовка, у которого этот класс есть)

Логика функции showTabContent() : по умолчанию функция будет показывать содержимое первой вкладки, так как аргументом стоит значение 0, для содержимого этой вкладки добавляется класс showfade для анимации), после чего удаляется класс hide и добавляется класс active для заголовка этого таба.

Вызываем эти две функции:

Код

  hideTabContent();
  showTabContent();

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

Код

  tabsParent.addEventListener('click', (event) => {
  const target = event.target;

  if (target && target.classList.contains('title_header_tabs')) {
  tabs.forEach((item, i) => {
  if (target == item) {
  hideTabContent();
  showTabContent(i);
  }
  });
  }
  });

В данном коде в условии выполняется проверка, что если event.target ссылается на кликнутый заголовок и у него есть класс title_header_tabs (то есть, что мы точно кликнули в заголовок таба, а не в пустое пространство блока), то происходит перебор псевдомассива из заголовков табов и если какой-либо заголовок совпадает с кликнутым, вызывается функция hideTabContent() для всех табов и функция showTabContent() для совпавшего с кликнутым заголовка (а точнее, для блока с содержимым вкладки этого заголовка).

Посмотреть результат Архив с файлами

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
табы
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)