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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вкладки</title>
  <style>
   .tabs {
    position: relative; /* Относительное позиционирование */
   }
   .tab, .tab-title {
    display: inline-block; /* Выстраиваем по горизонтали */
   }
   .tab input[type="radio"] { display: none; }
   .tab-title {
    background: #ccc; /* Цвет фона */
    padding: 5px 10px; /* Поля вокруг текста */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Снизу линию убираем */
   }
   .tab-content {
    position: absolute; /* Абсолютное позиционирование */
    border: 1px solid #666; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    left: 0; /* Размещаем у левого края */
    width: calc(100% - 20px); /* Ширина содержимого */
    display: none; /* Прячем вкладку */
   }
   .tab :checked + .tab-title {
    position: relative; /* Относительное позиционирование */
    background: #fff; /* Цвет фона */
    top: 1px; /* Сдвигаем вниз */
    z-index: 1; /* Отображаем поверх содержимого */
   }
   .tab :checked ~ .tab-content {
    display: block; /* Показываем активную вкладку */
   }
  </style>
 </head>
 <body>
  <div class="tabs">
   <div class="tab">
    <input type="radio" id="tab1" name="tab-group" checked>
    <label for="tab1" class="tab-title">Вкладка 1</label> 
    <section class="tab-content">Один</section>
   </div> 
   <div class="tab">
    <input type="radio" id="tab2" name="tab-group">
    <label for="tab2" class="tab-title">Вкладка 2</label> 
    <section class="tab-content">Два</section>
   </div>
   <div class="tab">
    <input type="radio" id="tab3" name="tab-group">
    <label for="tab3" class="tab-title">Вкладка 3</label> 
    <section class="tab-content">Три</section> 
   </div> 
  </div>
 </body>
</html>

вкладки

См. также

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич