Как создать вкладки на JavaScript

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

Рассмотрим самый простой способ создания вкладок на JavaScript, который заключается использовании data-атрибутов. Мы создадим HTML разметку, которая будет состоять из блока с навигацией по вкладкам и блоком с вкладками. Вкладкам мы задаем id с названием данной вкладки. Затем мы добавим data-атрибут data-tab к кнопкам со значением id вкладки, к которой они относятся. Далее при клике на кнопку мы будем добавлять класс _active нажатой кнопке и соответствующей вкладке.

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

<div class="tabs">
  <div class="tabs__nav">
    <button class="tabs__button" data-tab="tab_1">Вкладка 1</button>
    <button class="tabs__button" data-tab="tab_2">Вкладка 2</button>
    <button class="tabs__button" data-tab="tab_3">Вкладка 3</button>
    <button class="tabs__button" data-tab="tab_4">Вкладка 4</button>
  </div>
  
  <div class="tabs__content">
    <div class="tabs__item" id="tab_1">Контент 1</div>
    <div class="tabs__item" id="tab_2">Контент 2</div>
    <div class="tabs__item" id="tab_3">Контент 3</div>
    <div class="tabs__item" id="tab_4">Контент 4</div>
  </div>
</div>

В CSS скрываем вкладки с контентом у которых нет класса _active

.tabs__item:not(._active) {
    display: none;
}

И пишем JavaScript:

// получаем все кнопки навигации
const tabsButtons = document.querySelectorAll('.tabs__button');

// Проходимся по всем кнопкам
tabsButtons.forEach(btn => {
  // вешаем на каждую кнопку обработчик события клик
  btn.addEventListener('click', () => {
    // Получаем предыдущую активную кнопку
    const prevActiveItem = document.querySelector('.tabs__item._active');
    // Получаем предыдущую активную вкладку
    const prevActiveButton = document.querySelector('.tabs__button._active');
    
    // Проверяем есть или нет предыдущая активная кнопка
    if (prevActiveButton) {
      //Удаляем класс _active у предыдущей кнопки если она есть
      prevActiveButton.classList.remove('_active');
    }
    
    // Проверяем есть или нет предыдущая активная вкладка
    if (prevActiveItem) {
      // Удаляем класс _active у предыдущей вкладки если она есть
      prevActiveItem.classList.remove('_active');
    }
    // получаем id новой активной вкладки, который мы перем из атрибута data-tab у кнопки
    const nextActiveItemId = `#${btn.getAttribute('data-tab')}`;
    // получаем новую активную вкладку по id
    const nextActiveItem = document.querySelector(nextActiveItemId);
    
    // добавляем класс _active кнопке на которую нажали
    btn.classList.add('_active');
    // добавляем класс _active новой выбранной вкладке
    nextActiveItem.classList.add('_active');
  });
})

Если необходимо чтобы первая вкладка была сразу активна, то просто добавьте в разметке класс _active необходимой кнопке и вкладке.

Теперь вы знаете как сделать табы на чистом JavaScript. Остается дело за малым, стилизовать вкладки под свой проект.