Табы на чистом CSS и с использованием JavaScript

В этой статье мы поговорим об одном из популярных способов организации информации на странице — табы CSS (вкладки HTML). Мы разберем, что такое табы, и напишем два примера с живой демонстрацией результатов.

Что такое табы CSS

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

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

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

Реализовать вкладки можно разными способами: используя чистый CSS без JavaScript, с использованием JS, с помощью сторонней библиотеки. Конкретный способ реализации может зависеть от целей функционала табов.

В этой статье мы приведем два способа: табы на чистом CSS и CSS + JavaScript. Начнем с чистого CSS.

Табы на чистом CSS

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

Переключение между вкладками при таком варианте осуществляется благодаря использованию радиокнопок. Суть такой реализации состоит в следующем. Заголовки табов представляют собой радиокнопку с элементом label, который привязывается к своей радиокнопке. Саму радиокнопку мы скрываем с помощью CSS, а активация конкретной вкладки будет происходить при нажатии на соответствующий label.

Для каждого заголовка табы будет сверстана отдельная область контента. Область содержимого при этом связывается со своим заголовком. Это привязка создается через CSS с учетом значений data-атрибутов областей контента и идентификаторов заголовков вкладок.

Таким образом, при клике на заголовок вкладки отображается привязанная к этому заголовку область содержимого. Теперь продемонстрируем код подобной реализации.

HTML:

<div class="demoTabs">
    <input class="demoTabs__tab" type="radio" name="demoTab" id="demoTab-1" checked>
    <label class="demoTabs__label" for="demoTab-1">Вкладка 1</label>
    <input class="demoTabs__tab" type="radio" name="demoTab" id="demoTab-2">
    <label class="demoTabs__label" for="demoTab-2">Вкладка 2</label>
    <input class="demoTabs__tab" type="radio" name="demoTab" id="demoTab-3">
    <label class="demoTabs__label" for="demoTab-3">Вкладка 3</label>

    <div class="demoTabs__content">
        <div class="demoTabs__area" data-tab="demoTab-1">
            <p>Использование вкладок является популярным способом организации контента и улучшения пользовательского опыта на сайтах и в приложениях. Вкладки позволяют пользователям быстро переключаться между различными разделами контента без необходимости перезагрузки страницы или прокрутки длинного списка опций. Вкладки могут использоваться для организации различных типов контента, таких как статьи, функции продуктов или настроек.</p>
        </div>
        <div class="demoTabs__area" data-tab="demoTab-2">
            <p>Для проектирования вкладок существуют некоторые рекомендации. Вкладки должны быть ясно помечены и легко понятны, с краткими и описательными заголовками. Активная вкладка должна отличаться визуально от неактивных вкладок, чтобы помочь пользователям легко определить, какой раздел они в данный момент просматривают. Кроме того, использование анимаций при наведении или щелчке может помочь обеспечить визуальную обратную связь и улучшить общий пользовательский опыт.</p>
        </div>
        <div class="demoTabs__area" data-tab="demoTab-3">
            <p>Существует несколько способов реализации вкладок на сайте или в приложении, таких как использование HTML и CSS, JavaScript или сторонней библиотеки. Выбор способа реализации будет зависеть от конкретных потребностей и требований проекта, а также от навыков разработчика. Важно выбирать способ реализации, который является эффективным и доступным, и который хорошо работает на различных устройствах и в браузерах.</p>
        </div>
    </div>
</div>

CSS:

/* Базовые стили для всего виджета */
.demoTabs {
    display: block;
    background-color: #e0ddcf;
    border: 2px solid #68523d;
    color: #4a4440;
}

/* Внутренние отступы и граница для области содержимого */
.demoTabs__content {
    border-top: 2px solid #68523d;
    padding: 16px;
}

/* Скрываем радиокнопки */
.demoTabs__tab {
    display: none;
}

/* По умолчанию область контента каждой конкретной вкладки скрыта */
.demoTabs__area {
    display: none;
}

/* Стили для параграфа внутри области контента */
.demoTabs__area p {
    margin-bottom: 16px;
}

/* Стилизация одной вкладки */
.demoTabs__label {
    display: inline-block;
    font-weight: 700;
    padding: 5px 10px;
    margin: 0;
    background-color: #8b6e5d;
    color: #fff;
    cursor: pointer;
}

/* Изменение цвета вкладки при наведении курсора */
.demoTabs__label:hover {
    background-color: #bcaaa4;
}

/* Меням цвет вкладки, если она выбрана */
.demoTabs__tab:checked + .demoTabs__label {
    background-color: #bcaaa4;
}

/* Если конкретная вкладка (радиокнопка) выбрана, то ищем соседний элемент с классом .demoTabs__content, в котором отображаем блок с data-атрибутом, соответствующим id активной вкладки */
.demoTabs #demoTab-1:checked ~ .demoTabs__content .demoTabs__area[data-tab="demoTab-1"],
.demoTabs #demoTab-2:checked ~ .demoTabs__content .demoTabs__area[data-tab="demoTab-2"],
.demoTabs #demoTab-3:checked ~ .demoTabs__content .demoTabs__area[data-tab="demoTab-3"] {
    display: block;
}

Результат:

Далее приведем альтернативный пример с использованием JavaScript и AJAX-запросов.

Табы с использованием JavaScript

Если вам нужны более сложные табы, которые могут меняться динамически в зависимости от взаимодействия пользователя или обновляться с использованием AJAX, то использование JavaScript является более подходящим вариантом.

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

Напишем пример с использованием JavaScript и AJAX. В этом примере переключение между вкладками будет осуществляться с помощью событий нажатия на кнопки JavaScript. При нажатии на конкретную кнопку мы берем уникальную информацию, идентифицирующую определенную вкладку (в нашем случае это ID, который записан в data-атрибуте). Затем этот ID применяем в AJAX-запросе, чтобы получить данные о конкретном пользователе.

Для тестовых запросов будем использовать сервис https://reqres.in/. Полученный ответ мы обработаем и выведем в область контента. Ниже — код такой реализации.

HTML:

<div class="demoTabs">
    <input class="demoTabs__tab" type="radio" name="demoTabJs" id="demoTabJs-1" data-id="1" checked>
    <label class="demoTabs__label" for="demoTabJs-1">Вкладка 1</label>
    <input class="demoTabs__tab" type="radio" name="demoTabJs" id="demoTabJs-2" data-id="2">
    <label class="demoTabs__label" for="demoTabJs-2">Вкладка 2</label>
    <input class="demoTabs__tab" type="radio" name="demoTabJs" id="demoTabJs-3" data-id="3">
    <label class="demoTabs__label" for="demoTabJs-3">Вкладка 3</label>

    <div class="demoTabs__content" id="demoTabContentJs"></div>
</div>

CSS-код будет точно таким же, как и в предыдущем примере.

JavaScript:

window.addEventListener('load', function () {
    // Получим элемент области содержимого
    const contentArea = document.getElementById('demoTabContentJs');
    // Если HTML-кода табов нет на странице, не будем выполнять JS
    if (!contentArea) {
        return;
    }

    // Пройдем по всем вкладкам и добавим им события нажатия кнопки мыши
    const demoTabsJs = document.querySelectorAll('[id^="demoTabJs"]');
    demoTabsJs.forEach(tab => {
        tab.addEventListener('click', () => {
            fetchDemoTabInfo(tab, contentArea);
        });
    });

    // Запрос информации для первой вкладки при загрузке страницы
    fetchDemoTabInfo(document.getElementById('demoTabJs-1'), contentArea);
});

// Функция получения информации по API для определенной вкладки
function fetchDemoTabInfo(tab, contentArea) {
    // Получим уникальный номер соответствующей вкладки
    const selectedTabId = tab.getAttribute('data-id');
    // Возьмем тестовый URL для получения информации о пользователе
    // и добавим к этому URL идентификатор вкладки
    const url = 'https://reqres.in/api/users/' + selectedTabId;
    // Отправим запрос с помощью Fetch API
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Обработаем полученные данные, подготовим текст для контентной области
            let content = 'ID: ' + data.data.id + '<br>';
            content += 'NAME: ' + data.data.first_name + ' ' + data.data.last_name + '<br>';
            content += 'EMAIL: ' + data.data.email;

            // Установим текст в области содержимого
            contentArea.innerHTML = content;
        })
        // Если возникла ошибка при запросе, отобразим ее в области контента
        .catch(error => contentArea.textContent = 'Ошибка при запросе: ' + error);
}

Результат:

Заключение

Таким образом, мы рассмотрели два варианта создания табов CSS. Конечный выбор между использованием CSS или JS зависит от требований вашего проекта и уровня функциональности, которую вы хотите реализовать. Если вам нужны простые табы, используйте CSS. Когда вам необходимы более сложные вкладки, которые должны быть динамическими и обновляемыми, то используйте JS.