Создание адаптивных табов для сайта: пошаговое руководство

Для кого эта статья:

• Новички в веб-разработке
• Фронтенд-разработчики среднего уровня

• Дизайнеры, интересующиеся улучшением пользовательского интерфейса

  Представьте себе книгу с разделителями — именно так работают табы на сайте, позволяя организовать информацию в компактные, легко переключаемые секции. За последний год количество сайтов, использующих табы, выросло на 37% — и это не случайно! Этот элемент интерфейса не только экономит пространство, но и значительно улучшает пользовательский опыт. Сегодня я проведу вас через весь процесс создания профессиональных табов — от базовой разметки до адаптивных решений для мобильных устройств. Даже если вы только вчера написали свой первый тег HTML, к концу этого руководства вы сможете создать полнофункциональные вкладки, которые не стыдно показать потенциальным клиентам. 🚀

Хотите глубже погрузиться в мир интерактивных веб-интерфейсов? Курс Обучение веб-разработке от Skypro — идеальное решение для новичков! За 9 месяцев вы не просто научитесь создавать табы и другие интерактивные элементы, но и освоите весь стек современной фронтенд-разработки от HTML до React. Реальные проекты в портфолио и поддержка менторов помогут вам найти первую работу в IT уже через год!

Что такое табы и почему они нужны на вашем сайте

Табы (или вкладки) — это элемент интерфейса, который позволяет переключаться между различными секциями контента без необходимости перезагрузки страницы или перехода на другой URL. По сути, это виртуальный аналог разделителей в папке с документами.

Представьте, что вам нужно разместить на странице информацию о продукте: описание, характеристики, отзывы и способы доставки. Без табов эти блоки будут растянуты по всей странице, заставляя пользователя бесконечно скроллить. С табами вся информация организуется в компактные переключаемые секции, что значительно улучшает юзабилити. 📑

Алексей Рыбин, UX-дизайнер Недавно я работал над редизайном сайта компании, продающей бытовую технику. Их каталог товаров был катастрофически неудобным — каждый продукт имел длинную страницу с бесконечным скроллом: сначала основная информация, затем огромная таблица характеристик, видео, инструкции и только потом отзывы, которые искали большинство покупателей. После внедрения системы табов показатель отказов снизился на 23%, а среднее время на странице выросло на 40%. Табы позволили клиентам мгновенно переходить к нужной информации, а не прокручивать длинные страницы. Самым показательным было то, что раздел отзывов стал посещаться на 78% чаще — раньше многие пользователи просто не доскроливали до него!

Основные преимущества использования табов:

• Экономия пространства — размещение большого объема информации в компактной форме
• Улучшение навигации — пользователи быстро находят нужную информацию
• Структурирование контента — логическое разделение информации по категориям
• Улучшение пользовательского опыта — исключение необходимости прокручивать длинные страницы
• Повышение конверсии — более удобный интерфейс способствует более длительному взаимодействию с сайтом

HTML-структура для создания вкладок на сайте

Давайте начнем с создания базовой HTML-структуры для табов. Хорошо спроектированная разметка — фундамент надежного и доступного интерфейса с вкладками.

Основная структура табов состоит из двух частей:

• Навигация по табам — кнопки или ссылки, при нажатии на которые происходит переключение содержимого
• Контент табов — секции с содержимым, которые показываются или скрываются при переключении

Вот пример базовой HTML-структуры для создания табов:

<div class="tabs-container">
<!-- Навигация по табам -->
<ul class="tabs-nav">
<li><a href="#tab1" class="active">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
</ul>

<!-- Контент табов -->
<div class="tabs-content">
<div id="tab1" class="tab-pane active">
<h3>Содержимое вкладки 1</h3>
<p>Здесь размещается содержимое первой вкладки.</p>
</div>
<div id="tab2" class="tab-pane">
<h3>Содержимое вкладки 2</h3>
<p>Здесь размещается содержимое второй вкладки.</p>
</div>
<div id="tab3" class="tab-pane">
<h3>Содержимое вкладки 3</h3>
<p>Здесь размещается содержимое третьей вкладки.</p>
</div>
</div>
</div>

В приведенном примере мы создали контейнер tabs-container, который включает в себя два основных блока: навигацию (tabs-nav) и контент (tabs-content).

Обратите внимание на следующие ключевые элементы структуры:

• Используем ul и li для создания списка навигации, что обеспечивает семантическую корректность
• Каждая ссылка в навигации имеет атрибут href, указывающий на ID соответствующего контентного блока
• Класс active отмечает изначально активный таб
• Каждая панель контента имеет уникальный id, соответствующий ссылке в навигации

Эта базовая структура может быть расширена в зависимости от ваших потребностей. Например, вы можете добавить иконки к заголовкам табов или вложенные табы для более сложной иерархии информации. 🔍

Стилизация табов с помощью CSS: практические советы

После создания HTML-структуры пришло время придать нашим табам привлекательный внешний вид с помощью CSS. Правильная стилизация не только делает табы эстетически приятными, но и улучшает взаимодействие пользователей с интерфейсом. 🎨

Вот базовые CSS-стили для нашей структуры табов:

/* Основной контейнер */
.tabs-container {
max-width: 800px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

/* Стили для навигации */
.tabs-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid #ccc;
}

.tabs-nav li {
margin-right: 5px;
}

.tabs-nav a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 5px 5px 0 0;
transition: all 0.3s ease;
}

.tabs-nav a:hover {
background-color: #e9e9e9;
}

.tabs-nav a.active {
background-color: white;
border-bottom: 1px solid white;
margin-bottom: -1px;
color: #0066cc;
font-weight: bold;
}

/* Стили для контента */
.tabs-content {
border: 1px solid #ccc;
border-top: none;
padding: 20px;
}

.tab-pane {
display: none;
}

.tab-pane.active {
display: block;
}

Эти стили создают классический вид табов с заголовками, расположенными над содержимым. Обратите внимание на несколько ключевых моментов:

• Гибкая компоновка — использование display: flex для выравнивания заголовков табов
• Визуальное разделение — границы и фоновые цвета для создания визуальной иерархии
• Обратная связь — эффект hover и стили для активного состояния
• Плавные переходы — свойство transition для создания плавных эффектов

Мария Коваленко, фронтенд-разработчик Работая над интерфейсом крупного образовательного портала, я столкнулась с интересной задачей: нужно было создать систему табов, которая бы выдерживала до 12 вкладок в одной линии, при этом оставаясь удобной для пользователей. Стандартное решение с горизонтальными табами быстро показало свою несостоятельность — на узких экранах заголовки табов накладывались друг на друга, а на широких выглядели слишком растянутыми и терялись на странице. Я разработала адаптивное решение: на широких экранах табы оставались горизонтальными, но с ограниченной шириной и эллипсисами для длинных заголовков, а при уменьшении ширины экрана превращались в выпадающее меню. Это решение увеличило вовлечение пользователей в мобильной версии на 28% и снизило количество ошибок навигации на 35%.

Вы можете экспериментировать с различными стилями, чтобы создать уникальный вид табов, соответствующий дизайну вашего сайта. Вот несколько популярных вариаций:

Дополнительные CSS-советы для улучшения ваших табов:

• Используйте box-shadow вместо границ для создания более современного вида
• Добавьте анимации для плавного перехода между табами с помощью @keyframes
• Рассмотрите возможность использования CSS-переменных для легкой настройки цветовой схемы
• Не забудьте о состояниях :focus для доступности с клавиатуры

Создание интерактивных вкладок с JavaScript и jQuery

Пришло время добавить интерактивность нашим табам! HTML и CSS создают структуру и внешний вид, но именно JavaScript делает табы полноценно функциональными. Рассмотрим несколько подходов — от нативного JavaScript до решений с использованием jQuery. 💻

Начнем с простого решения на чистом JavaScript:

document.addEventListener('DOMContentLoaded', function() {
// Получаем все элементы табов
const tabLinks = document.querySelectorAll('.tabs-nav a');
const tabContents = document.querySelectorAll('.tab-pane');

// Добавляем обработчик события для каждой ссылки
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();

// Удаляем класс active у всех ссылок и контентных блоков
tabLinks.forEach(item => item.classList.remove('active'));
tabContents.forEach(item => item.classList.remove('active'));

// Добавляем класс active текущей ссылке
this.classList.add('active');

// Находим и активируем соответствующий контентный блок
const tabId = this.getAttribute('href');
document.querySelector(tabId).classList.add('active');
});
});

// По умолчанию активируем первый таб, если ни один не активен
if (!document.querySelector('.tabs-nav a.active')) {
tabLinks[0].click();
}
});

Этот код делает следующее:

• Ожидает полной загрузки DOM
• Находит все ссылки табов и контентные панели
• Добавляет обработчики событий клика для каждой ссылки
• При клике на ссылку удаляет активное состояние у всех табов и активирует только нужный
• Обеспечивает, чтобы при загрузке страницы был активен как минимум один таб

Если вы используете jQuery, вот эквивалентное решение, которое можно реализовать более компактно:

$(document).ready(function() {
$('.tabs-nav a').on('click', function(e) {
e.preventDefault();

// Удаляем класс active у всех ссылок и контентных блоков
$('.tabs-nav a, .tab-pane').removeClass('active');

// Добавляем класс active текущей ссылке и соответствующему контенту
$(this).addClass('active');
$($(this).attr('href')).addClass('active');
});

// Активируем первый таб, если ни один не активен
if (!$('.tabs-nav a.active').length) {
$('.tabs-nav a:first').click();
}
});

Для более сложных сценариев можно добавить дополнительные возможности:

• Запоминание последнего активного таба — с использованием localStorage
• Ленивая загрузка контента — загрузка содержимого таба только при его активации
• Анимированные переходы — плавное появление/исчезновение контента
• Клавиатурная навигация — возможность переключения табов с помощью клавиш

Вот пример расширенного решения с некоторыми из этих функций:

document.addEventListener('DOMContentLoaded', function() {
const tabLinks = document.querySelectorAll('.tabs-nav a');
const tabContents = document.querySelectorAll('.tab-pane');

// Функция для активации таба
function activateTab(tabLink) {
// Удаляем активное состояние у всех элементов
tabLinks.forEach(item => item.classList.remove('active'));
tabContents.forEach(item => item.classList.remove('active'));

// Активируем текущий таб
tabLink.classList.add('active');
const tabId = tabLink.getAttribute('href');
const tabContent = document.querySelector(tabId);

// Анимированное появление контента
tabContent.style.opacity = 0;
tabContent.classList.add('active');

setTimeout(() => {
tabContent.style.transition = 'opacity 0.3s ease';
tabContent.style.opacity = 1;
}, 50);

// Сохраняем выбранный таб в localStorage
localStorage.setItem('activeTab', tabId);
}

// Добавляем обработчики событий
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
activateTab(this);
});
});

// Восстанавливаем последний активный таб или активируем первый
const savedTab = localStorage.getItem('activeTab');
if (savedTab && document.querySelector(`a[href="${savedTab}"]`)) {
activateTab(document.querySelector(`a[href="${savedTab}"]`));
} else {
activateTab(tabLinks[0]);
}

// Добавляем поддержку клавиатурной навигации
document.addEventListener('keydown', function(e) {
if (!document.querySelector('.tabs-nav:focus-within')) return;

const activeIndex = Array.from(tabLinks).findIndex(link => link.classList.contains('active'));
let newIndex;

if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
newIndex = (activeIndex + 1) % tabLinks.length;
activateTab(tabLinks[newIndex]);
tabLinks[newIndex].focus();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
newIndex = (activeIndex – 1 + tabLinks.length) % tabLinks.length;
activateTab(tabLinks[newIndex]);
tabLinks[newIndex].focus();
}
});
});

Адаптивные табы для мобильных устройств: лучшие практики

Создание табов, которые одинаково хорошо работают на всех устройствах, — это важный аспект современного веб-дизайна. На мобильных экранах традиционные горизонтальные табы могут занимать слишком много места или становиться неудобными для нажатия. Рассмотрим лучшие практики создания адаптивных табов. 📱

Существует несколько основных подходов к адаптации табов для мобильных устройств:

1. Прокручиваемые табы — горизонтальная прокрутка заголовков табов
2. Стековые табы — вертикальное расположение заголовков табов
3. Выпадающий список — трансформация табов в выпадающий список (select)
4. Аккордеон — преобразование табов в аккордеон на маленьких экранах

Давайте рассмотрим CSS-код для одного из самых популярных решений — прокручиваемых табов:

/* Базовые стили для всех размеров экрана */
.tabs-container {
max-width: 100%;
margin: 0 auto;
}

/* Стили для десктопных экранов */
@media (min-width: 768px) {
.tabs-nav {
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #ccc;
overflow: visible;
}

.tabs-nav li {
flex: 0 0 auto;
}
}

/* Стили для мобильных экранов */
@media (max-width: 767px) {
.tabs-nav {
display: flex;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
scrollbar-width: none; /* Скрываем полосу прокрутки в Firefox */
padding-bottom: 5px;
}

.tabs-nav::-webkit-scrollbar {
display: none; /* Скрываем полосу прокрутки в Chrome/Safari */
}

.tabs-nav li {
flex: 0 0 auto;
}

.tabs-nav a {
padding: 10px 12px; /* Уменьшаем отступы для экономии места */
font-size: 14px; /* Уменьшаем размер шрифта */
}

.tabs-content {
padding: 15px 10px; /* Уменьшаем отступы в контентной части */
}
}

Теперь давайте рассмотрим JavaScript-код для преобразования табов в выпадающий список на мобильных устройствах:

document.addEventListener('DOMContentLoaded', function() {
const tabsContainer = document.querySelector('.tabs-container');
const tabsNav = document.querySelector('.tabs-nav');
const tabLinks = document.querySelectorAll('.tabs-nav a');
const tabContents = document.querySelectorAll('.tab-pane');

// Функция создания выпадающего списка
function createMobileDropdown() {
// Создаем select элемент
const select = document.createElement('select');
select.className = 'tabs-dropdown';

// Добавляем опции для каждого таба
tabLinks.forEach(link => {
const option = document.createElement('option');
option.value = link.getAttribute('href');
option.textContent = link.textContent;

if (link.classList.contains('active')) {
option.selected = true;
}

select.appendChild(option);
});

// Обработчик события изменения выпадающего списка
select.addEventListener('change', function() {
const tabId = this.value;

// Деактивируем все табы
tabLinks.forEach(link => link.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));

// Активируем выбранный таб
document.querySelector(`a[href="${tabId}"]`).classList.add('active');
document.querySelector(tabId).classList.add('active');
});

// Добавляем выпадающий список перед навигацией
tabsContainer.insertBefore(select, tabsNav);
}

// Функция для переключения между режимами отображения
function toggleTabDisplay() {
if (window.innerWidth < 768) {
// Мобильный режим
if (!document.querySelector('.tabs-dropdown')) {
createMobileDropdown();
tabsNav.style.display = 'none';
}
} else {
// Десктопный режим
const dropdown = document.querySelector('.tabs-dropdown');
if (dropdown) {
dropdown.remove();
tabsNav.style.display = '';
}
}
}

// Вызываем функцию при загрузке и изменении размера окна
toggleTabDisplay();
window.addEventListener('resize', toggleTabDisplay);

// Обычные обработчики для табов
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();

tabLinks.forEach(item => item.classList.remove('active'));
tabContents.forEach(item => item.classList.remove('active'));

this.classList.add('active');
document.querySelector(this.getAttribute('href')).classList.add('active');

// Обновляем выпадающий список, если он существует
const dropdown = document.querySelector('.tabs-dropdown');
if (dropdown) {
dropdown.value = this.getAttribute('href');
}
});
});
});

Важные моменты для обеспечения хорошего пользовательского опыта на мобильных устройствах:

• Касаемые элементы — размер кнопок не менее 44×44px для удобного нажатия пальцем
• Индикаторы прокрутки — визуальные подсказки, если не все табы видны на экране
• Оптимизация текста — сокращение длинных заголовков на маленьких экранах
• Тестирование — проверка на реальных устройствах, а не только в эмуляторах

Вот сравнение различных подходов к адаптации табов для мобильных устройств:

Создание табов — это не просто техническая задача, но и искусство проектирования удобного интерфейса. Уделяя внимание деталям HTML-структуры, CSS-стилизации и JavaScript-функциональности, вы сможете создать интуитивно понятные и эффективные вкладки для любого проекта. Помните, что лучший пользовательский интерфейс — тот, который пользователь даже не замечает, потому что он работает именно так, как ожидается. Теперь у вас есть все необходимые знания и инструменты, чтобы создавать профессиональные табы для любого сайта или приложения!