Введение
Табы (вкладки) являются неотъемлемой частью современных веб-интерфейсов, позволяя компактно организовать контент и улучшить пользовательский опыт. Сегодня мы рассмотрим создание простых, но функциональных табов с использованием HTML, CSS и JavaScript.
HTML структура
<div class="tabs">
<div class="tabs__nav">
<button class="tabs__btn active" data-tab="1">Вкладка 1</button>
<button class="tabs__btn" data-tab="2">Вкладка 2</button>
<button class="tabs__btn" data-tab="3">Вкладка 3</button>
</div>
<div class="tabs__content">
<div class="tabs__pane active" data-tab-content="1">
Содержимое первой вкладки
</div>
<div class="tabs__pane" data-tab-content="2">
Содержимое второй вкладки
</div>
<div class="tabs__pane" data-tab-content="3">
Содержимое третьей вкладки
</div>
</div>
</div>
CSS стили
.tabs__nav {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.tabs__btn {
padding: 10px 20px;
border: none;
background: #f0f0f0;
cursor: pointer;
}
.tabs__btn.active {
background: #007bff;
color: white;
}
.tabs__pane {
display: none;
}
.tabs__pane.active {
display: block;
}
JavaScript функционал
document.addEventListener('DOMContentLoaded', function() {
const tabsBtn = document.querySelectorAll('.tabs__btn');
const tabsContent = document.querySelectorAll('.tabs__pane');
tabsBtn.forEach(button => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
tabsBtn.forEach(btn => btn.classList.remove('active'));
tabsContent.forEach(content => content.classList.remove('active'));
button.classList.add('active');
document.querySelector(`[data-tab-content="${tabId}"]`).classList.add('active');
});
});
});
Объяснение работы кода
Наша система табов состоит из трех ключевых компонентов:
- HTML структура создает разметку с кнопками навигации и контентными блоками. Каждая кнопка и соответствующий ей контент связаны через атрибуты
data-tabиdata-tab-content. - CSS стили отвечают за визуальное оформление. Класс
activeиспользуется для отображения активной вкладки и её содержимого. Неактивные вкладки скрываются с помощьюdisplay: none. - JavaScript обрабатывает клики по кнопкам табов. При клике происходит:
- Удаление класса
activeу всех кнопок и контентных блоков - Добавление класса
activeвыбранной кнопке и соответствующему контентному блоку - Определение нужного контентного блока по значению атрибута
data-tab
Заключение
Реализация табов на чистом JavaScript позволяет создать интуитивно понятный интерфейс без использования сторонних библиотек. Такой подход обеспечивает максимальную производительность и полный контроль над функциональностью. Вы можете легко модифицировать представленный код под свои нужды, добавляя анимации или дополнительные функции.
Понравилась запись? Оцените!
Оценок: 1 Среднее: 5
