Как создать вкладки, подобные тем, что изображены на экране?

Question

Емельян

css

Как создать вкладки, подобные тем, что изображены на экране?

Здравствуйте! <br/> У кого-то есть опыт решения подобной задачи? <br/> Как создать такие вкладки? <br/>

21 октября 2024 г. 13:02

Ответы на вопрос 1

Похожие вопросы

Answer 1

Здравствуйте! Чтобы создать вкладки, похожие на те, что вы упомянули, можно использовать HTML, CSS и немного JavaScript. Вот простой пример реализации вкладок:

### HTML

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Вкладки</title>
</head>
<body>
    <div class="tabs">
        <div class="tab" onclick="openTab(event, 'tab1')">Вкладка 1</div>
        <div class="tab" onclick="openTab(event, 'tab2')">Вкладка 2</div>
        <div class="tab" onclick="openTab(event, 'tab3')">Вкладка 3</div>
    </div>
    <div class="tab-content" id="tab1">
        <h3>Содержимое Вкладки 1</h3>
        <p>Это содержимое первой вкладки.</p>
    </div>
    <div class="tab-content" id="tab2" style="display:none;">
        <h3>Содержимое Вкладки 2</h3>
        <p>Это содержимое второй вкладки.</p>
    </div>
    <div class="tab-content" id="tab3" style="display:none;">
        <h3>Содержимое Вкладки 3</h3>
        <p>Это содержимое третьей вкладки.</p>
    </div>

    <script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css)

```css
body {
    font-family: Arial, sans-serif;
}

.tabs {
    display: flex;
}

.tab {
    padding: 10px 20px;
    background-color: lightgray;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
}

.tab:hover {
    background-color: gray;
}

.tab-content {
    border: 1px solid #ccc;
    padding: 20px;
    display: none; /* Скрыть все содержимое по умолчанию */
}

.tab-content.active {
    display: block; /* Отобразить активное содержимое */
}
```

### JavaScript (script.js)

```javascript
function openTab(event, tabId) {
    // Скрыть все содержимое вкладок
    var tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach((content) => {
        content.style.display = 'none';
    });

    // Удалить активный класс у всех вкладок
    var tabs = document.querySelectorAll('.tab');
    tabs.forEach((tab) => {
        tab.classList.remove('active');
    });

    // Показать выбранную вкладку и добавить класс активности
    document.getElementById(tabId).style.display = 'block';
    event.currentTarget.classList.add('active');
}

// Открыть первую вкладку по умолчанию
document.querySelector('.tab').click();
```

### Объяснение

1. **HTML**: Создаем разметку для вкладок и содержимого. Каждая вкладка при клике вызывает функцию JavaScript `openTab`.
2. **CSS**: Стили для вкладок и их содержимого. Мы используем класс `active` для отображения активного состояния.
3. **JavaScript**: Функция `openTab` скрывает все вкладки и показывает только ту, которая была кликнута. Также добавляется класс `active` для текущей вкладки.

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