UI-компоненты: табы на JavaScript

Создадим простые табы на JavaScript. Мы определим четыре кнопки вкладок и соответствующее содержимое вкладок с помощью HTML. Мы также определяем некоторый CSS для стилизации кнопок вкладок и скрытия содержимого вкладок по умолчанию.

Пример, который мы сделаем:

HTML:

<div class="tabs">
  <!-- Разметка для кнопок табов -->
  <button class="tab-button" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tab-button" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tab-button" onclick="openTab(event, 'tab3')">Tab 3</button>
  <button class="tab-button" onclick="openTab(event, 'tab4')">Tab 4</button>

  <!-- Разметка для контента табов -->
  <div id="tab1" class="tab-content">
    <h3>Tab 1 Content</h3>
    <p>This is the content for Tab 1.</p>
  </div>

  <div id="tab2" class="tab-content">
    <h3>Tab 2 Content</h3>
    <p>This is the content for Tab 2.</p>
  </div>

  <div id="tab3" class="tab-content">
    <h3>Tab 3 Content</h3>
    <p>This is the content for Tab 3.</p>
  </div>

  <div id="tab4" class="tab-content">
    <h3>Tab 4 Content</h3>
    <p>This is the content for Tab 4.</p>
  </div>
</div>

CSS:

/* По умолчанию скрываем контент табов */
.tab-content {
  display: none;
  padding: 10px;
}

/* Стилизуем вкладки */
.tab-button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px;
  cursor: pointer;
}

/* Добавляем цвет фона для активной вкладки */
.active {
  background-color: beige;
}

JavaScript:

// Функция для открытия таба
function openTab(event, tabName) {
  var i, tabContent, tabButton;

  // Скрываем весь контент табов
  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  // Удаляем «активный» класс со всех кнопок табов
  tabButton = document.getElementsByClassName("tab-button");
  for (i = 0; i < tabButton.length; i++) {
    tabButton[i].className = tabButton[i].className.replace(" active", "");
  }

  // Показать содержимое выбранной вкладки и
  // добавить класс active к кнопке, которая открыла вкладку
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

Мы определяем функцию JavaScript с именем openTab, которая вызывается при нажатии кнопки вкладки. Эта функция сначала скрывает все содержимое вкладки и удаляет «активный» класс со всех кнопок вкладок. Затем она показывает выбранное содержимое вкладки и добавляет «активный» класс к кнопке, которая открыла вкладку.