Как сделать - меню-вкладки
Узнайте, как создавать вкладки с помощью CSS и JavaScript.
Вкладки
Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:
London
London - это столица Англии.
Paris
Paris - это столица Франции.
Tokyo
Tokyo - это столица Японии.
Создать переключаемые вкладки
Шаг 1) Добавить HTML:
Пример
<!-- Ссылки на вкладки -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event,
'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event,
'Tokyo')">Tokyo</button>
</div>
<!-- Содержимое вкладок -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London - это столица Англии.</p>
</div>
<div
id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris
- это столица Франции.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo - это столица Японии.</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;
}
/* Создайте активный / текущий класс tablink */
.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" и удалите класс "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>
Попробуйте сами »
Совет: Также вы можете посетить главу Как сделать - Вертикальные вкладки на нашем сайте W3Schools на русском.
