Как сделать - Вкладки
Узнать, как создать вкладки с помощью CSS и JavaScript.
Вкладки
Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:
Лондон
Лондон является столицей Англии.
Париж
Париж является столицей Франции.
Токио
Токио является столицей Японии.
Создание переключаемых вкладок
Шаг 1) Добавить HTML:
Пример
<!-- Ссылки вкладки -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">Лондон</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Париж</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Токио</button>
</div>
<!-- Содержимое вкладки -->
<div id="London" class="tabcontent">
<h3>Лондон</h3>
<p>Лондон является столицей Англии.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Париж</h3>
<p>Париж является столицей Франции.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Токио</h3>
<p>Токио является столицей Японии.</p>
</div>
Создание кнопок для открытия определенного содержимого вкладки. Все элементы <div> с class="tabcontent" скрыты по умолчанию (с помощью CSS и JS). Когда пользователь нажимает на кнопку, он открывает содержимое вкладки, которое "соответствует" этой кнопке.
Шаг 2) Добавить CSS:
Стиль кнопок и содержимого вкладки:
Пример
/* Стиль вкладки */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Стиль кнопок, которые используются для открытия содержимого вкладки */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Изменение цвета фона кнопок при наведении курсора */
.tab button:hover {
background-color: #ddd;
}
/* Создание активного/текущего класса связи вкладки */
.tab button.active {
background-color: #ccc;
}
/* Стиль содержимого вкладки */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Шаг 3) Добавить JavaScript:
Пример
function openCity(evt, cityName) {
// Объявить все переменные
var i, tabcontent, tablinks;
// Получить все элементы с помощью class="tabcontent" и спрятать их
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Получить все элементы с помощью class="tablinks" и удалить class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Показать текущую вкладку и добавить "active" класс для кнопки, которая открыла вкладку
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
Редактор кода »
Вкладки исчезают:
Если вы хотите скрыть содержимое вкладки, добавьте следующий CSS:
Пример
.tabcontent {
animation: fadeEffect 1s; /* Эффект затухания занимает 1 секунду */
}
/* Перейти от нуля к полной непрозрачности */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
Редактор кода »
Показывать вкладку по умолчанию
Чтобы открыть определенную вкладку при загрузке страницы, используйте JavaScript, чтобы "нажать" на указанную кнопку вкладки:
Пример
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Получить элемент с помощью id="defaultOpen" и нажмите на нее
document.getElementById("defaultOpen").click();
</script>
Редактор кода »
Закрыть вкладку
Если вы хотите закрыть определенную вкладку, используйте JavaScript, чтобы скрыть вкладку одним нажатием кнопки:
Пример
<!-- Нажмите на кнопку элемент <span> для закрытия вкладки -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London является столицей Англии.</p>
<span onclick="this.parentElement.style.display='none'">x</span>
</div>
Редактор кода »
Совет: Также, посмотрите Как сделать - Вертикальные вкладки.
