Вкладки на 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