Войти
Регистрация

Создаем вкладки на чистом CSS

Создаем вкладки на чистом CSS

Здравствуйте, друзья!

В этой статье мы поговорим с Вами как сделать вкладки на чистом CSS без использования JavaScript.

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

К счастью с помощью CSS можно реализовать эту задумку без особых усилий с помощью радиокнопок, т.е. тега <input> со значением checkbox у атрибута type.

Давайте сразу начнем с HTML-кода и я его прокомментирую:

<div class="tabs">

  <div class="tab">
    <input type="radio" id="tab-1" name="tab-radio" checked />
    <label for="tab-1">Главная</label>
    <div class="content">
      <p><b>Заголовок вкладки "Главная"</b></p>
      <p>Текст</p>
   </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-2" name="tab-radio" />
    <label for="tab-2">Контакты</label>
    <div class="content">
      <p><b>Заголовок вкладки "Контакты"</b></p>
      <p>Текст</p>
   </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-3" name="tab-radio" />
    <label for="tab-3">О нас</label>
    <div class="content">
      <p><b>Заголовок вкладки "О нас"</b></p>
      <p>Текст</p>
   </div>
  </div>

</div>

Здесь в качестве вкладок у нас выступает радиокнопка <input type="radio"> и его <label>. Каждую радиокнопку, ее метку и блок с текстом мы занесли в отдельный блок.

Все радиокнопки у нас имеют единый атрибут name со значением tab-radio, чтобы мы могли их переключать.

Первая радиокнопка уже имеет атрибут checked, чтобы первая вкладка была активна по умолчанию.

Теперь напишем CSS-правила:

.tabs {
   clear: both;
   font-family: arial;
   margin: 25px 0;
   min-height: 200px;
   position: relative;
}
.tab {
   float: left;
}
.tab label {
   background: #eee;
   border: 1px solid #ccc;
   border-bottom: none;
   border-radius: 5px 5px 0 0;
   color: #81807e;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
   left: 1px;
   margin: 0 5px 0 -1px;
   padding: 10px 20px 8px;
   position: relative;
   text-transform: uppercase;
}
.tab [type=radio] {
   display: none;
}
.content {
   background: #FFF;
   border: 1px solid #ccc;
   bottom: 0;
   left: 0;
   padding: 20px;
    position: absolute;
   right: 0;
   top: 22px;
}
input[type=radio]:checked ~ label {
   background: #e3dea4;
   border-bottom: 1px solid transparent;
   color: #000;
   z-index: 2;
}
input[type=radio]:checked ~ label ~ .content {
   z-index: 1;
}

Комментарии к CSS:

В первую очередь мы скрываем радиокнопки, в качестве вкладок визуально выступают стилизованные теги <label>.

Блок с вкладками и текстом мы выстраиваем в ряд с помощью свойства float и значения left.

Блокам с текстом мы задаем абсолютное позиционирование, тем самым делаем их плавающими и располагаем их ниже вкладок.

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

Символ ~ обозначает родственные элементы, которые находятся в одном родительском блоке. Т.е. когда <input type="radio"> в состоянии :checked мы применяем стиль к родственному элементу <label> и <content>

Работу вкладок можете посмотреть здесь: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?