Tabs (giao diện chuyển đổi nội dung theo từng mục) là một trong những thành phần giao diện phổ biến nhất trong các ứng dụng web. Thông thường, bạn cần đến JavaScript để xử lý logic chuyển đổi nội dung. Nhưng trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách tạo Tab Content bằng CSS thuần – cực nhẹ, dễ bảo trì, hoàn toàn không cần JS.

📦 Lợi ích khi dùng CSS để tạo Tabs

  • ✅ Không phụ thuộc JavaScript
  • ✅ Hoạt động tốt trên hầu hết các trình duyệt hiện đại
  • ✅ Gọn nhẹ, tăng hiệu suất load trang
  • ✅ Dễ sử dụng trong các trang HTML tĩnh hoặc template Blade

🛠 Cấu trúc HTML

html
<input type="radio" id="tab1" name="tabs">
<label for="tab1">Tab 1</label>

<input type="radio" id="tab2" name="tabs" checked>
<label for="tab2">Tab 2</label>

<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tab 3</label>

<div class="tab-content" id="content1">Nội dung Tab 1</div>
<div class="tab-content" id="content2">Nội dung Tab 2</div>
<div class="tab-content" id="content3">Nội dung Tab 3</div>

📌 Giải thích:

  • Mỗi tab là một <input type="radio"> có id và name="tabs" giống nhau để nhóm lại.
  • Mỗi <label> tương ứng với một radio bằng for.
  • div.tab-content chứa nội dung tương ứng với mỗi tab.

🎨 CSS để điều khiển hiển thị

css
input[type="radio"] {
	display: none; /* Ẩn nút radio */
}

label {
	display: inline-block;
	padding: 10px 20px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #ccc;
	margin-right: 5px;
	transition: background 0.3s;
}

input[type="radio"]:checked + label {
	background: white;
	font-weight: bold;
	border-bottom: 1px solid white;
}

.tab-content {
	display: none;
	padding: 20px;
	border: 1px solid #ccc;
	border-top: none;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
	display: block;
}

📌 Mẹo:

  • Dùng + label để style tab đang active.
  • Dùng ~ #contentX để hiển thị nội dung tương ứng khi radio được chọn.

🧠 Ví dụ đầy đủ

Bạn có thể click vào THỬ ONLINE để chỉnh sửa trực tiếp.

html
Thử online
<style>
input[type="radio"] {
	display: none; /* Ẩn nút radio */
}

label {
	display: inline-block;
	padding: 10px 20px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #ccc;
	margin-right: 5px;
	transition: background 0.3s;
}

input[type="radio"]:checked + label {
	background: white;
	font-weight: bold;
	border-bottom: 1px solid white;
}

.tab-content {
	display: none;
	padding: 20px;
	border: 1px solid #ccc;
	border-top: none;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
	display: block;
}
</style>

<input type="radio" id="tab1" name="tabs">
<label for="tab1">Tab 1</label>

<input type="radio" id="tab2" name="tabs" checked>
<label for="tab2">Tab 2</label>

<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tab 3</label>

<div class="tab-content" id="content1">Nội dung Tab 1</div>
<div class="tab-content" id="content2">Nội dung Tab 2</div>
<div class="tab-content" id="content3">Nội dung Tab 3</div>

✅ Khi nào nên dùng CSS-only Tabs?

Trường hợpCó phù hợp?
Website tĩnh hoặc HTML đơn giản✅ Rất phù hợp
Form nhiều bước (step form)✅ Có thể dùng
Tabs với nội dung động, async (AJAX)❌ Nên dùng JS
Ẩn/hiện nội dung có hiệu ứng nâng cao❌ CSS bị hạn chế

🔚 Kết luận

Việc tạo tab content chỉ với CSS là một kỹ thuật đơn giản nhưng hiệu quả. Nếu bạn đang xây dựng một website nhẹ, hoặc muốn giảm tải JavaScript, đây là một giải pháp lý tưởng.

✍️ Đừng quên theo dõi CodeTutHub để nhận thêm nhiều hướng dẫn CSS hay ho!