Tạo tab toàn trang (full-page tabs) với CSS và JavaScript

Ví dụ tạo Full-Page Tabs với CSS và JavaScript

Dưới đây là mã hoàn chỉnh để tạo giao diện tab chiếm toàn bộ màn hình, chuyển đổi nội dung bằng JavaScript thuần.

Mã HTML/CSS/JS

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .tablink {
      background-color: #555;
      color: white;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px 14px;
      font-size: 15px;
      width: 33.33%;
      transition: background-color 0.3s;
    }
    .tablink:hover {
      background-color: #333;
    }
    .tablink.active {
      background-color: #000;
    }
    .tabcontent {
      color: white;
      display: none;
      padding: 100px 20px;
      height: 100%;
      text-align: center;
    }
    #Home { background-color: #2196F3; }
    #About { background-color: #757575; }
    #Contact { background-color: #FF9800; }
  </style>
</head>
<body>
  <button class="tablink" onclick="openTab('Home', this, '#2196F3')" id="defaultOpen">Home</button>
  <button class="tablink" onclick="openTab('About', this, '#757575')">About</button>
  <button class="tablink" onclick="openTab('Contact', this, '#FF9800')">Contact</button>

  <div id="Home" class="tabcontent">
    <h3>Home</h3>
    <p>Chào mừng đến với trang chủ.</p>
  </div>

  <div id="About" class="tabcontent">
    <h3>About</h3>
    <p>Thông tin về công ty và đội ngũ.</p>
  </div>

  <div id="Contact" class="tabcontent">
    <h3>Contact</h3>
    <p>Liên hệ với chúng tôi qua email hoặc điện thoại.</p>
  </div>

  <script>
    function openTab(pageName, elmnt, color) {
      // Ẩn tất cả tab content
      var tabcontent = document.getElementsByClassName("tabcontent");
      for (var i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      // Bỏ active tất cả tab link
      var tablinks = document.getElementsByClassName("tablink");
      for (var i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
        tablinks[i].classList.remove("active");
      }
      // Hiện tab content được chọn
      document.getElementById(pageName).style.display = "block";
      // Active tab link
      elmnt.style.backgroundColor = color;
      elmnt.classList.add("active");
    }
    // Mở tab mặc định khi load trang
    document.getElementById("defaultOpen").click();
  </script>
</body>
</html>

Giải thích cơ chế

• CSS: Tab buttons chia đều chiều rộng (33.33%), tab content chiếm toàn màn hình (height: 100%)
• JavaScript: Hàm openTab() ẩn tất cả content, bỏ active tất cả button, rồi hiện content tương ứng và active button được click
• Mặc định: Gọi click() trên tab đầu tiên khi load trang

Cải tiến hiện đại

• Dùng classList.toggle thay vì inline style
• Thêm ARIA attributes cho accessibility (role="tab", aria-selected)
• Dùng CSS Grid/Flexbox thay float
• Hỗ trợ keyboard navigation (Tab, Enter, Arrow keys)

Ảnh minh họa giao diện tab Home và Contact đã bị loại bỏ do không có file ảnh thực tế.