Вкладки

Часть раздела 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-селектор, который отображает содержимое вкладки при выборе.

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

<!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>