Узнайте, как создать горизонтальные переключаемые вкладки используя HTML, CSS и JavaScript.
Горизонтальные вкладки
Горизонтальные вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы:
Лондон
Лондон — столица Англии.
Париж
Париж — столица Франции.
Токио
Токио — столица Японии.
Создать горизонтальные вкладки
Шаг 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>Лондон — столица Англии.</p>
</div>
<div
id="Paris" class="tabcontent";>
<h3>Париж</h3>
<p>Париж
— столица Франции.</p>
</div>
<div id="Токио" 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" и удалить
класс "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 {
от
{opacity: 0;}
на {opacity: 1;}
}
Попробуйте сами »
Показывать вкладку по умолчанию
Чтобы открыть определенную вкладку при загрузке страницы, используйте JavaScript, чтобы "нажать" на указанную вкладку button:
<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>Лондон</h3>
<p>Лондон — столица Англии.</p>
<span onclick="this.parentElement.style.display='none'">x</span>
</div>
Попробуйте сами »
Совет: Также ознакомьтесь с Как сделать - Вертикальные вкладки.