Вкладки на CSS
Вкладки представляют собой набор блоков, между которыми можно переключаться щелчком по «выступу» с заголовком блока (рис. 1).
Рис. 1. Вид вкладок
Для создания вкладок мы используем группу переключателей, поскольку они позволяют выбрать только один переключатель из группы. Все вкладки вставляем в <div> с классом tabs, а для каждой вкладки используем набор из <input>, <label> и <section>, которые вложены в <div> с классом tab (пример 1).
Пример 1. Код отдельной вкладки
<div class="tab">
<input type="radio" id="tab1" name="tab-group">
<label for="tab1" class="tab-title">Заголовок вкладки</label>
<section class="tab-content">
Содержимое вкладки
</section>
</div>
Элемент <input> нужен для создания функционала вкладок, в стилях к нему позже добавим псевдокласс :checked. Элемент <label> используется для заголовка каждой вкладки, его надо связать с <input> с помощью атрибутов id и for. A <section> хранит содержимое вкладки.
В CSS сперва прячем исходные переключатели с помощью свойства display со значением none.
input[type="radio"] { display: none; }
Чтобы вкладки располагались по горизонтали, добавим к классам tab и tab-title свойство display со значением inline-block.
.tab, .tab-title { display: inline-block; }
Заголовок вкладок сделаем серого цвета с рамкой, активная вкладка будет белой. Стиль заголовка активной вкладки получаем за счёт комбинации селекторов :checked и tab-title. В стиле <label> смещаем на один пиксель вниз, чтобы заголовок и содержимое вкладки образовывали единое пространство без линии снизу. И добавляем свойство z-index для отображения заголовка поверх содержимого вкладки.
.tab :checked + .tab-title {
position: relative; /* Относительное позиционирование */
background: #fff; /* Цвет фона */
top: 1px; /* Сдвигаем вниз */
z-index: 1; /* Отображаем поверх содержимого */
}
Содержимое каждой вкладки прячем опять же через display. Нам также требуется явно задать ширину блока как 100%, так он будет занимать всю доступную ширину. Чтобы значение padding не влияло на ширину блока, можно воспользоваться свойством box-sizing или вычислить ширину через функцию calc().
.tab-content {
padding: 10px; /* Поля вокруг текста */
width: 100%; /* Ширина */
box-sizing: border-box; /* Ширина не включает padding */
или
padding: 10px; /* Поля вокруг текста */
width: calc(100% - 20px); /* Ширина содержимого */
}
Стиль содержимого активной вкладки задаём через довольно громоздкий селектор.
.tab :checked + .tab-title + .tab-content { display: block; }
Впрочем, его можно заменить на более изящный и компактный с помощью братского селектора.
.tab :checked ~ .tab-content { display: block; }
Окончательный код для создания вкладок с использованием псевдокласса :checked показан в примере 2.
Пример 2. Вкладки на CSS
См. также
- <label>
- box-sizing
- height
- width
- Аккордеон меню
- Выпадающее меню
- Использование :checked
- Открываем блочную модель
- Подсказка в поле формы
- Пользовательские формы
- Псевдокласс :checked
- Размеры блока
- Спойлер
- Стилизация переключателей
- Стилизация флажков
- Строчно-блочные элементы
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label