Как создать сайт с использованием табов для переключения контента

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

HTML-структура

Для создания табов нам потребуется следующая HTML-структура:

<div class="tabs">
  <ul class="tab-list">
    <li class="tab-item active" data-tab="tab1">Таб 1</li>
    <li class="tab-item" data-tab="tab2">Таб 2</li>
    <li class="tab-item" data-tab="tab3">Таб 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">Содержимое таба 1</div>
    <div class="tab-pane" id="tab2">Содержимое таба 2</div>
    <div class="tab-pane" id="tab3">Содержимое таба 3</div>
  </div>
</div>

Здесь мы создали контейнер с классом tabs, содержащий список вкладок tab-list и контейнер с контентом tab-content. Каждая вкладка имеет атрибут data-tab, соответствующий идентификатору соответствующего контента.

CSS-стили

Теперь добавим немного стилей для наших табов:

.tabs {
  width: 100%;
  display: inline-block;
}

.tab-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.tab-item {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  cursor: pointer;
  background-color: #f1f1f1;
  border-radius: 5px 5px 0 0;
}

.tab-item.active {
  background-color: #fff;
}

.tab-content {
  border: 1px solid #f1f1f1;
  padding: 20px;
  border-radius: 5px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

Эти стили задают базовую стилизацию для нашей структуры табов, делая их более приятными для глаза 😉.

JavaScript-логика

Наконец, добавим небольшой скрипт, который будет отвечать за переключение контента при нажатии на вкладки:

document.addEventListener('DOMContentLoaded', function() {
  var tabItems = document.querySelectorAll('.tab-item');

  tabItems.forEach(function(tab) {
    tab.addEventListener('click', function() {
      var tabId = this.getAttribute('data-tab');
      var content = document.getElementById(tabId);

      // Удаляем активный класс у текущих вкладок и контента
      document.querySelector('.tab-item.active').classList.remove('active');
      document.querySelector('.tab-pane.active').classList.remove('active');

      // Добавляем активный класс для выбранной вкладки и контента
      this.classList.add('active');
      content.classList.add('active');
    });
  });
});

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

Теперь у вас есть функциональный сайт с использованием табов для переключения контента! 🎉

Не забывайте продолжать изучать веб-разработку и практиковаться в создании различных элементов. Успехов вам в обучении!