Как сделать табы?
Создание табов (вкладок) на веб-странице с использованием HTML, CSS и JavaScript - это популярный способ организации контента с возможностью переключения между различными секциями. Вот как это можно сделать:
1. HTML: Создайте структуру для табов, где каждая вкладка представляет собой кнопку или элемент заголовка, а контент вкладки размещается в отдельных блоках.
<div class="tabs">
<button class="tab-button active" data-tab="tab1">Вкладка 1</button>
<button class="tab-button" data-tab="tab2">Вкладка 2</button>
<button class="tab-button" data-tab="tab3">Вкладка 3</button>
</div>
<div class="tab-content" id="tab1">Содержимое вкладки 1</div>
<div class="tab-content" id="tab2">Содержимое вкладки 2</div>
<div class="tab-content" id="tab3">Содержимое вкладки 3</div>
2. CSS: Оформите внешний вид табов и контента вкладок с помощью CSS.
.tabs {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.tab-button {
padding: 10px 20px;
background-color: #ccc;
border: none;
cursor: pointer;
}
.tab-button.active {
background-color: #f0f0f0;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.tab-content.active {
display: block;
}
3. JavaScript: Добавьте функциональность переключения между вкладками с помощью JavaScript.
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Скрыть все контенты вкладок
tabContents.forEach(content => {
content.classList.remove('active');
});
// Отобразить выбранный контент вкладки
const tabId = button.getAttribute('data-tab');
const tabContent = document.getElementById(tabId);
tabContent.classList.add('active');
// Добавить класс активности выбранной вкладке
tabButtons.forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
});
});
Это базовый пример реализации табов. Вы можете настроить стили и функциональность под свои потребности, добавить анимации и дополнительные эффекты.
