Вкладки

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 21 из 35.

Вкладки — это способ организации контента по отдельным разделам, позволяющий при этом держать всё на одной странице. Вместо того чтобы прокручивать длинную страницу, пользователи могут переключаться между панелями контента, нажимая на вкладку. Вы часто можете встретить вкладки на страницах настроек, в панелях управления или описаниях товаров (например, Подробности, Отзывы, FAQ).

Мы можем создавать вкладки без использования JavaScript, используя:

Радиокнопки (чтобы одновременно могла быть активна только одна вкладка)
Метки (labels), которые работают как кликабельные кнопки вкладок
CSS-селекторы (:checked) для отображения нужного контента

HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">This is the content of Tab 1.</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">This is the content of Tab 2.</div>
   
   <input type="radio" id="tab3" name="tab">
   <label for="tab3">Tab 3</label>
   <div id="content3" class="tab-content">This is the content of Tab 3.</div>
 </div>

CSS:

<style>
  /* Скрыть радиокнопки */
  input { display: none; }

  /* Метки вкладок */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

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

  /* Показать содержимое, когда радиокнопка выбрана */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Выделить активную вкладку */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Вот краткое напоминание, которое вы могли бы дать студентам:

+ (смежный селектор) → выбирает непосредственно следующий элемент.
~ (общий родственный селектор) → выбирает любой следующий родственный элемент (не только следующий за ним).

Задание

Легко

Вам предоставлен начальный HTML-код с двумя уже настроенными вкладками. Ваша задача — расширить и улучшить систему вкладок.

Добавьте еще одну вкладку для “Sleep”:
- Метка: Sleep
- Содержимое: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Добавьте #tab3:checked ~ #content3 в CSS-селектор, который отображает содержимое вкладки при выборе.

Шпаргалка

Создавайте вкладки без использования JavaScript, используя радиокнопки, метки и селекторы CSS:

Структура HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">Content for Tab 1</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">Content for Tab 2</div>
</div>

CSS для функциональности вкладок:

/* Скрыть радиокнопки */
input { display: none; }

/* Стилизация меток вкладок */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

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

/* Показать контент, когда радиокнопка выбрана */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Выделить активную вкладку */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

Селекторы соседних элементов CSS:

+ (соседний селектор) → выбирает элемент, находящийся непосредственно после
~ (общий родственный селектор) → выбирает любой последующий родственный элемент

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Tabs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }

    .tabs {
      display: flex;
      flex-direction: column;
      width: 350px;
    }

    /* Hide the radio inputs */
    .tabs input {
      display: none;
    }

    /* Tab labels */
    .tabs label {
      padding: 10px;
      background: #eee;
      cursor: pointer;
      border: 1px solid #ccc;
    }

    .tabs label:hover {
      background: #ddd;
    }

    /* Tab content */
    .tab-content {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background: #fff;
      line-height: 1.5;
    }

    /* Show content when radio is checked */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2 {
      display: block;
    }

    /* Highlight active tab */
    #tab1:checked + label,
    #tab2:checked + label,
    #tab3:checked + label {
      background: #4cafef;
      color: white;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">Nutrition</label>
    <div id="content1" class="tab-content">
      <h3>Nutrition</h3>
      <p>A balanced diet fuels your body and mind. Focus on fruits, vegetables, whole grains, and lean proteins. Avoid too much processed food.</p>
    </div>

    <input type="radio" id="tab2" name="tab">
    <label for="tab2">Exercise</label>
    <div id="content2" class="tab-content">
      <h3>Exercise</h3>
      <p>Daily movement strengthens your body and reduces health risks. Even a 30-minute walk or stretching makes a difference.</p>
    </div>

  </div>
</body>
</html>