Tab

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 21 trên 35.

Tab giúp sắp xếp nội dung thành các phần riêng biệt mà vẫn giữ mọi thứ trên cùng một trang. Thay vì cuộn một trang dài, người dùng có thể chuyển giữa các bảng nội dung bằng cách nhấp vào một tab. Bạn thường thấy tab trong các trang cài đặt, bảng điều khiển hoặc phần mô tả sản phẩm (ví dụ: Chi tiết, Đánh giá, Câu hỏi thường gặp).

Ta có thể tạo các tab mà không cần JavaScript bằng cách dùng:

Nút radio (để mỗi lần chỉ có một tab hoạt động)
Nhãn đóng vai trò là các nút tab có thể nhấp
Bộ chọn CSS (:checked) để hiển thị nội dung phù hợp

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>
  /* Ẩn các nút radio */
  input { display: none; }

  /* Nhãn của các tab */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Mặc định ẩn nội dung */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Hiện nội dung khi nút radio được chọn */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Làm nổi bật tab đang hoạt động */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Đây là lời nhắc nhanh bạn có thể đưa ra cho học sinh:

+ (phần tử anh em liền kề) → chọn phần tử ngay tiếp theo.
~ (phần tử anh em tổng quát) → chọn bất kỳ phần tử anh em nào theo sau (không chỉ phần tử tiếp theo).

Thử thách

Dễ

Bạn được cung cấp HTML khởi đầu đã thiết lập sẵn hai thẻ. Nhiệm vụ của bạn là mở rộng và cải thiện hệ thống thẻ.

Thêm một thẻ nữa cho “Sleep”:
- Nhãn: Sleep
- Nội dung: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Thêm #tab3:checked ~ #content3 vào bộ chọn CSS hiển thị nội dung thẻ khi được chọn.

Tự làm thử

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