Tab

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 1 trên 27.

Các tab giúp người dùng chuyển đổi giữa những phần nội dung khác nhau mà không cần rời khỏi trang. Trong phần 4, chúng ta đã tạo tab bằng HTML và CSS. Bây giờ, chúng ta sẽ dùng JavaScript.

Điểm chính:

Chúng ta dùng thuộc tính display (none / block) để ẩn và hiển thị các phần tử.
Khi người dùng nhấp vào một tab, chúng ta gọi hàm và truyền ID của tab đó.

Bên trong hàm, chúng ta dùng querySelectorAll + forEach để ẩn nội dung của tất cả các thẻ.
Cuối cùng, chúng ta hiển thị phần khớp với ID.

<div class="tabs">
  <button class="tab" onclick="openTab('services')">Services</button>
  <button class="tab" onclick="openTab('contact')">Contact</button>
</div>

<div id="services" class="tab-content">Our services are listed here.</div>
<div id="contact" class="tab-content" style="display:none;">Contact us at contact@example.com.</div>

<script>
  function openTab(tabId) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    // Show the selected tab
    document.getElementById(tabId).style.display = 'block';
  }
</script>

Thử thách

Dễ

Mình đã viết hàm (function) JavaScript giúp các tab hoạt động. Nhiệm vụ của bạn:

Thêm thuộc tính onclick vào mỗi nút tab để khi nhấp vào tab, nội dung tương ứng sẽ hiển thị
Gọi hàm openTab().
Truyền id của nội dung tab (home, about hoặc contact).

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Simple Tabs Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tabs">
    <!-- Mỗi nút gọi hàm (function) và truyền ID của tab vào hàm -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- Theo mặc định, chỉ "Home" hiển thị -->
  <div id="home" class="tab-content">Welcome to the homepage!</div>
  <div id="about" class="tab-content" style="display:none;">Learn more about us here.</div>
  <div id="contact" class="tab-content" style="display:none;">Get in touch with us.</div>

  <script src="script.js"></script>
</body>
</html>