Создадим простые табы на 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, которая вызывается при нажатии кнопки вкладки. Эта функция сначала скрывает все содержимое вкладки и удаляет «активный» класс со всех кнопок вкладок. Затем она показывает выбранное содержимое вкладки и добавляет «активный» класс к кнопке, которая открыла вкладку.
Комментарии
0