Вкладки (или табы) – это метод организации контента без перезагрузки страницы. Создание вкладок требует хорошего понимания HTML, CSS и JavaScript. Давайте начнем с создания вкладок с использованием чистого JavaScript.

Создание вкладок с использованием чистого JavaScript

  • Разметка HTML

Сначала создадим разметку HTML для наших вкладок. Для этого нам понадобятся некоторые элементы, которые будут представлять собой табы и соответствующий им контент. Вот пример разметки:

«`html

<div class=»tabs»>

<div class=»tab-button» data-tab=»tab1″>1</div>

<div class=»tab-button» data-tab=»tab2″>2</div>

<div class=»tab-button» data-tab=»tab3″> 3</div>

</div>

<div id=»tab1″ class=»tab-content»>

<p>Содержимое</p>

</div>

<div id=»tab2″ class=»tab-content»>

<p>Содержимое</p>

</div>

<div id=»tab3″ class=»tab-content»>

<p>Содержимое</p>

</div>

«`

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

  • Стилизация с CSS

Мы можем определить стили внешнего вида, такие как цвета, шрифты и размеры, в зависимости от дизайна вашего сайта.

«`css

.tabs {

display: flex;

}

.tab-button {

cursor: pointer;

padding: 10px 20px;

border: 1px solid #ccc;

background-color: #f0f0f0;

}

.tab-content {

display: none;

}

.tab-content.active {

display: block;

}

«`
  • JavaScript

Теперь давайте добавим JavaScript для обработки нажатий и переключения контента.

«`javascript

document.addEventListener(‘DOMContentLoaded’, function() {

const tabButtons = document.querySelectorAll(‘.tab-button’);

const tabContents = document.querySelectorAll(‘.tab-content’);

tabButtons.forEach(button => {

button.addEventListener(‘click’, function() {

// Очистить активные классы у кнопок и контента

tabButtons.forEach(btn => btn.classList.remove(‘active’));

tabContents.forEach(content => content.classList.remove(‘active’));

// Добавить активный класс к выбранной

const tabId = button.getAttribute(‘data-tab’);

document.getElementById(tabId).classList.add(‘active’);

button.classList.add(‘active’);

});

});

});

«`

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

Создание вкладок с использованием Bootstrap

Bootstrap – это популярный фреймворк для разработки сайтов, который предоставляет готовые компоненты, включая вкладки. Для использования Bootstrap, вам нужно подключить его CSS и JS файлы к вашему проекту.

Для этого достаточно в теге head прописать:

«`html

<link rel=»stylesheet» href=»https://cdn.jsdelivr.net/npm/bootstrap@5.7.2/dist/css/bootstrap.min.css»>

<script src=»https://cdn.jsdelivr.net/npm/bootstrap

@5.7.2/dist/js/bootstrap.min.js»></script>

«`
  • Разметка HTML

Создадим разметку с использованием Bootstrap:

«`html

<ul class=»nav nav-tabs» id=»myTab» role=»tablist»>

<li class=»nav-item» role=»presentation»>

<a class=»nav-link active» id=»tab1-tab» data-toggle=»tab» href=»#tab1″ role=»tab» aria-controls=»tab1″ aria-selected=»true»>Таб 1</a>

</li>

<li class=»nav-item» role=»presentation»>

<a class=»nav-link» id=»tab2-tab» data-toggle=»tab» href=»#tab2″ role=»tab» aria-controls=»tab2″ aria-selected=»false»>Таб 2</a>

</li>

<li class=»nav-item» role=»presentation»>

<a class=»nav-link» id=»tab3-tab» data-toggle=»tab» href=»#tab3″ role=»tab» aria-controls=»tab3″ aria-selected=»false»>Таб 3</a>

</li>

</ul>

<div class=»tab-content» id=»myTabContent»>

<div class=»tab-pane fade show active» id=»tab1″ role=»tabpanel» aria-labelledby=»tab1-tab»>Содержимое</div>

<div class=»tab-pane fade» id=»tab2″ role=»tabpanel» aria-labelledby=»tab2-tab»>Содержимое</div>

<div class=»tab-pane fade» id=»tab3″ role=»tabpanel» aria-labelledby=»tab3-tab»>Содержимое</div>

</div>

«`
  • JavaScript для Bootstrap

Bootstrap уже предоставляет встроенные функции и автоматически обрабатывает переключение при нажатии на кнопки.

Заключение

Создание вкладок на веб-странице – это отличный способ организовать и отображать разное содержимое пользователю. В этой статье мы рассмотрели два способа создания: с использованием чистого JS и с помощью Bootstrap. Выбор зависит от ваших предпочтений и требований проекта.