Табы — это один из популярных элементов интерфейса, который позволяет организовать контент на веб-странице. Данный элемент делает контент более удобным для восприятия. Табы помогают пользователям переключаться между различными секциями информации, не перегружая экран лишними данными. В этой статье мы рассмотрим, как создать табы с использованием HTML и JavaScript, а также немного истории и применения табов в веб-дизайне.
Немного истории
Концепция табов восходит к интерфейсам, используемым в настольных приложениях. Первые табы появились в 1980-х годах, когда разработчики начали использовать их для организации информации в пределах одного окна. Однако их широкое применение в веб-разработке началось только в конце 1990-х годов, с появлением технологий HTML и JavaScript.
В то время веб-страницы были статическими и содержали большое количество информации. Это делало их перегруженными и трудными для навигации. Табы были одним из первых решений, которое позволило разработчикам разбить контент на несколько категорий и сделать его более удобным для пользователя.
С тех пор табы стали стандартом в веб-дизайне, особенно с распространением AJAX и динамического контента, который позволил обновлять содержимое без перезагрузки страницы.
Табы имеют ряд достоинств, которые делают их популярным выбором для веб-разработчиков
Позволяют пользователям легко перемещаться между разными разделами контента, не покидая текущей страницы.
Позволяют разместить большое количество информации на небольшом пространстве, что делает их идеальными для веб-страниц с ограниченным пространством.
Табы являются интуитивно понятными даже для пользователей, которые недружны с веб-технологиями.
Могут быть оформлены в различных стилях и цветах, что делает их визуально привлекательными и улучшает общий вид веб-страницы.
Существует несколько типов табов, которые могут быть использованы на веб-страницах
Горизонтальные — наиболее распространенный тип, который размещается в верхней части страницы и содержит несколько вкладок.
Вертикальные — размещаются на боковой панели страницы и содержат несколько вкладок.
Динамические табы могут быть созданы с помощью JavaScript и позволяет пользователю создавать новые вкладки или удалять существующие.
Адаптивные табы адаптируются к размеру экрана, чем обеспечивают правильное отображение на мобильных устройствах.
Пишем код:
Сначала создаем разметку для наших табов, в которой кнопки никак не привязаны к вкладками. Делаем это для того, чтобы можно было разносить вкладки, как угодно, согласно любого дизайн-макета. Это может быть необходимым, когда используется перемещение блоков при адаптиве.
<!-- Навигация по вкладкам -->
<div class="tabs-nav">
<button data-tab="tab_1">Вкладка 1</button>
<button data-tab="tab_2">Вкладка 2</button>
<button data-tab="tab_3">Вкладка 3</button>
</div>
<!-- Вкладки -->
<div class="tabs-panel" data-panel="tab_1">
<p>Содержимое вкладки 1.</p>
</div>
<div class="tabs-panel" data-panel="tab_2">
<p>Содержимое вкладки 2.</p>
<p>Содержимое вкладки 2.</p>
</div>
<div class="tabs-panel" data-panel="tab_3">
<p>Содержимое вкладки 3.</p>
<p>Содержимое вкладки 3.</p>
<p>Содержимое вкладки 3.</p>
</div>
В CSS мы используем класс is-active, для управления активным табом и содержимым в текущий момент. Управление происходит посредством JavaScript.
Во время верстки, вы можете задать свои стили и имена классов, как для табов, так и для вкладок. Вся привязка скрипта происходит через атрибуты.
/* Скрываем все вкладки по умолчанию */
.tabs-panel {
display: none;
}
/* Показываем активную вкладку */
.tabs-panel.is-active {
display: block;
animation: fadeIn 0.5s ease-in-out; /* Анимация появления */
}
/* Кнопка */
.tabs-nav button{
cursor: pointer;
transition: all 0.5s ease-in-out;
}
/* Активная кнопка */
.tabs-nav button.is-active{
background-color: grey;
color: white;
}
/* Анимация */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
В JavaScript мы описываем функцию в виде класса. Используя данный класс, при создании нового экземпляра, вы можете задать атрибуты с которыми собираетесь работать. По умолчанию для кнопок установлен атрибут [data-tab], а для содержимого [data-panel]. Также при при создании экземпляра, вы можете установить индекс открытой вкладки. По умолчанию активной будет вкладка с нулевым индексом.
class Tabs {
constructor(options = {}) {
// Дефолтная конфигурация
const defaultConfig = {
button: "data-tab",
panel: "data-panel",
index: 0,
};
this.options = Object.assign(defaultConfig, options);
this.buttons = document.querySelectorAll(`[${this.options.button}]`);
this.panels = document.querySelectorAll(`[${this.options.panel}]`);
this.listener();
}
// Отслеживание нажатий на кнопки
listener() {
this.showTab(this.searchId(this.options.index));
this.buttons.forEach((btn) => {
btn.addEventListener("click", (e) => this.tabsChanger(e));
});
}
// Находим Id для вкладки
searchId(index) {
const PL = this.panels.length;
if (index <= PL - 1) {
return this.panels[index].getAttribute(`${this.options.panel}`);
} else {
return this.panels[0].getAttribute(`${this.options.panel}`);
}
}
// Находим вкладку которую нужно показать
tabsChanger(e) {
const tabId = e.currentTarget.getAttribute(`${this.options.button}`);
this.showTab(tabId);
}
showTab(tabId) {
// 1. Деактивируем все кнопки
this.buttons.forEach((button) => button.classList.remove("is-active"));
// 2. Скрываем все вкладки
this.panels.forEach((panel) => panel.classList.remove("is-active"));
// 3. Активируем нужную кнопку
this.buttons.forEach((btn) => {
if (btn.getAttribute(`${this.options.button}`) == tabId) {
btn.classList.add("is-active");
}
});
// 4. Показываем нужную вкладку
this.panels.forEach((panel) => {
if (panel.getAttribute(`${this.options.panel}`) == tabId) {
panel.classList.add("is-active");
}
});
}
}
Для использования данной функции используйте следующий код:
window.addEventListener("DOMContentLoaded", function () {
const tabInPage = document.querySelector("[data-tab]");
tabInPage && new Tabs({
button: "data-tab",
panel: "data-panel",
index: 0,
});
});
Ссылки:
Пример кода вы можете скачать с нашего репозитория на GitHub: https://github.com/Webpolka/Tabs
Перейти на странцу с примером https://webpolka.github.io/Tabs/
В этой статье мы рассмотрели историю появления табов, их достоинства и типы. Мы также написали свой функциональный класс для создания табов с фэйд-эффектом. В заключении хочу сказать, что табы являются эффективным методом организации контента на веб-страницах.
