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

Создание вкладок на сайте с помощью HTML

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

Шаг 1: Основная структура

Для начала создадим базовую HTML-структуру для вкладок. Вложим элементы вкладок в контейнер, который будет служить основой для всего интерфейса.

<div class="tabs">
    <div class="tab" data-tab="1">Вкладка 1</div>
    <div class="tab" data-tab="2">Вкладка 2</div>
    <div class="tab" data-tab="3">Вкладка 3</div>
</div>
<div class="tab-content">
    <div class="content" data-tab="1">Содержимое вкладки 1</div>
    <div class="content" data-tab="2">Содержимое вкладки 2</div>
    <div class="content" data-tab="3">Содержимое вкладки 3</div>
</div>

Шаг 2: Стилизация с помощью CSS

Теперь добавим немного CSS, чтобы сделать вкладки более привлекательными. Применим стили для вкладок и их содержимого.

.tabs {
    display: flex;
    cursor: pointer;
}

.tab {
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

.tab-content .content {
    display: none;
}

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

Шаг 3: Добавление функционала с JavaScript

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

<script>
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        const targetTab = tab.dataset.tab;
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.remove('active'));

        tab.classList.add('active');
        document.querySelector(`.content[data-tab="${targetTab}"]`).classList.add('active');
    });
});
</script>

Заключение

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