CSS Tab thực sự tuyệt vời trong việc hiển thị thông tin liên quan ở một nơi dễ điều hướng. Về cơ bản, chúng trông giống như các ngăn chia theo tab mà bạn sẽ thấy trong hộp công thức nấu ăn hoặc bìa cứng. Dưới đây là một số ví dụ về các trang web sử dụng điều hướng theo tab:
- Southwest Airlines sử dụng điều hướng theo thẻ để cho phép người dùng điều hướng giữa việc đăng ký chuyến bay, đặt chuyến bay hoặc thêm khách sạn vào đặt chỗ của họ.
- Doanh nghiệp sử dụng các tab để điều hướng nhằm cho phép người dùng quyết định giữa việc thuê hoặc mua, đồng thời tìm hiểu về các dịch vụ khác của họ.
Khi bạn quan sát hai trang web này, hãy nghĩ xem ưu điểm của việc sử dụng thành phần giao diện người dùng như vậy trên các trang web này là gì. Nó giải quyết những vấn đề gì? Điều hướng theo tab sẽ là cách triển khai tốt cho loại thông tin nào?
Khi bạn cần tiếp cận cấu trúc giao diện người dùng tổ chức văn bản hoặc thông tin thành các thành phần có ý nghĩa và hiển thị chúng trên màn hình mà không chiếm quá nhiều không gian, điều hướng theo thẻ là một lựa chọn khôn ngoan. Chúng ta sẽ nói sâu hơn về điều hướng theo thẻ khi chúng ta bắt đầu sử dụng JavaScript, jQuery và / hoặc Bootstrap, nhưng cũng có một cách triển khai mà chúng ta có thể sử dụng chỉ yêu cầu HTML và CSS thuần túy. Hãy xem cách thiết lập:
Thiết lập HTML của bạn:
Hãy tiếp tục và thiết lập HTML soạn sẵn của bạn với một vùng chứa bên trong phần thân sẽ đóng vai trò là vùng chứa chính của chúng ta cho dự án. Bạn có thể gọi nó bất cứ thứ gì bạn muốn trong thuộc tính class, nhưng tôi sẽ gọi nó là class=”tabs” . Cho đến nay, HTML của bạn sẽ trông như thế này:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Tabs</title> <style> /* No CSS to display yet */ </style> </head> <body> <div class="tabs"></div> <body> </html>
Bên trong “tabs” <div> , chúng tôi sẽ chèn thêm bốn
tab . Điều này đại diện cho mỗi tab trong số bốn tab mà chúng ta sẽ viết ngày hôm nay. Nó sẽ chứa đầu vào, nhãn tab và nội dung tab. Hãy tạo các vùng chứa trống cho tất cả những thứ đó:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tabs</title>
<style> /* No CSS to display yet */ </style>
</head>
<body>
<div class="tabs">
<div class="tab">
/* THIS IS OUR PLAN IN ACTION*/
/*input */
<input type="radio" id="tab-1" name="tab-group-1" checked/>
/*label for input */
<label for="tab-1">Label 1</label>
/* content */
<div class="content">Our content will go here</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1" checked/>
<label for="tab-2">Label 2</label>
<div class="content gryffindor">Our content will go here</div>
</div>
<div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!</div>
<div class="tab"></div>
</div>
<body>
</html>
Bên trong tên lớp nội dung sẽ là nội dung của chúng ta. Bạn có thể sử dụng bất kỳ nội dung nào bạn muốn, nhưng thông lệ tiêu chuẩn là sử dụng nội dung được liên kết trên một tab.
Thời gian bắt đầu CSS:
Khi nói đến việc viết CSS, hãy bắt đầu trên vùng chứa lớn nhất và làm việc theo cách của bạn với vùng chứa nhỏ nhất. Đây là điều tối thiểu chúng ta cần làm để nó hoạt động:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- Đặt bộ chọn thẻ đại diện thành kích thước hộp:hộp viền.
- Trên vùng chứa chính, chúng ta cần đặt thuộc tính hiển thị để linh hoạt và đặt vị trí thành tương đối. Display:flex cho phép các tab nằm cạnh nhau trong một hàng và vị trí tương đối về cơ bản hoạt động như một ranh giới hoặc hàng rào chứa nội dung của tab.
Tại thời điểm này, bạn sẽ thấy những gì trông giống như bốn khối văn bản với một nút radio và một số nội dung. Tiếp theo, chúng ta phải tìm ra cách để hiển thị khối đã chọn và ẩn các khối khác.
- Trên vùng chứa .tab, chúng tôi sẽ thiết lập kiểu cho nhãn:
- Đường viền liền mạch 1px với bất kỳ màu nào bạn muốn.
- Padding:5px, 10px - sẽ thêm một số không gian xung quanh văn bản nhãn
- Bán kính đường viền 10px, 10px, 0px, 0px - điều này sẽ làm cho nhãn trông giống một tab truyền thống hơn.
Nếu bạn kiểm tra công việc của mình bây giờ, bạn sẽ thấy rằng các nhãn có các nút radio hình tròn ở bên trái của chúng. Vì vậy, nó trông giống một tab truyền thống hơn, nhưng để vẫn giữ thuộc tính đã kiểm tra của nút, chúng ta cần ẩn phần hình tròn của nút radio.
- Để thực sự chọn nút, chúng tôi sử dụng .tab [type =’radio’]. Để ẩn nó, chúng tôi đặt hiển thị thành không.
Tiếp theo, chúng ta cần xử lý nội dung thực tế để nó chỉ hiển thị một tab tại một thời điểm.
- Chọn div nội dung và sau đó đặt vị trí thành tuyệt đối. Khi vị trí tuyệt đối được đặt, div có thể được đặt ở bất kỳ đâu bên trong giá trị gốc tương đối. Sử dụng trên cùng, phải, trái và dưới cùng, bạn có thể đặt nội dung mà bạn muốn bên trong div mẹ. Trong trường hợp này, hãy đặt thuộc tính trái và phải thành 0. Chúng tôi cũng muốn tạo đường viền và đặt màu nền thành màu không trong suốt.
- Đặt chỉ mục z của tab đã chọn sẽ đặt bảng điều khiển của tab đó lên trên cùng. Để làm như vậy, hãy chọn nút đã chọn và nội dung của nó. Để làm điều này, chúng tôi sử dụng [type =’radio’]:đã kiểm tra ~ nhãn ~ .content. Dấu “~“ ở giữa các phần tử trong CSS cho chúng ta biết rằng chúng ta muốn lớp nội dung xuất hiện sau phần tử nhãn xuất hiện sau một nút radio được chọn.
- Để hiển thị tab nào đang hoạt động, hãy đặt nhãn [type =’radio’]:check ~ thành màu nền khác.
Giờ đây, khi người dùng nhấp vào từng tab, họ sẽ có thể đi từ tab này sang tab khác thành công mà không cần nhìn thấy nội dung của các bảng khác. Đây là mức tối thiểu bạn cần để điều hướng theo tab hoạt động. Hãy thử chơi với CSS để thay đổi kiểu! Một triển khai hoạt động được mã hóa dưới đây:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tabs</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto';
}
.tabs {
max-width: 700px;
min-height: 100px;
margin: 25px 0;
width: 100%;
display: flex;
/* allows for tabs to be next to each other */
position: relative;
/* relative here contains the width of the content */
}
.tab label {
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
border-radius: 10px 10px 0 0;
}
.tab [type='radio'] {
display: none;
/* this makes the radio buttons disappear - we are only keeping track if they are checked or not */
}
h3 {
margin: 10px 40px;
}
ul {
list-style-type: none;
}
.content {
padding: 10px;
border-radius: 0px 10px 10px 10px;
position: absolute;
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
/* the left and right at 0 help the tabs to overlap each other */
}
/* This allows the selected tab to be on top */
[type='radio']:checked ~ label ~ .content {
z-index: 1;
}
[type="radio"]:checked ~ label {
background: lightgrey;
}
/* color scheme for tabs */
[type='radio']:checked ~ #gryffindor {
background: #ec9086;
color: #241806;
}
[type='radio']:checked ~ #ravenclaw {
background: #3054ca;
color: #241806;
}
[type='radio']:checked ~ #slytherin {
background: #089714;
color: #252525;
}
[type='radio']:checked ~ #hufflepuff {
background: #f0d695;
color: #372e29;
}
[type='radio'] ~ #slytherin {
background: #033807;
color: #aaaaaa;
}
[type='radio'] ~ #hufflepuff {
background: #f0c75e;
color: #372e29;
}
[type='radio'] ~ #gryffindor {
background: #9c1203;
color: #e3a000;
}
[type='radio'] ~ #ravenclaw {
background: #0e1a40;
color: #946b2d;
}
.gryffindor {
background: #9c1203;
color: #e3a000;
}
.slytherin {
background: #033807;
color: #aaaaaa;
}
.hufflepuff {
background: #f0c75e;
color: #372e29;
}
.ravenclaw {
background: #0e1a40;
color: #946b2d;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked/>
<label id="gryffindor" for="tab-1">Gryffindor</label>
<div class="content gryffindor">
<h3>HP Chars in Gryffindor</h3>
<ul class="gryffindor-students">
<li>Harry Potter</li>
<li>Hermione Grainger</li>
<li>Ron Weasley</li>
<li>Albus Dumbledore</li>
<li>Katie Bell</li>
<li>Neville Longbottom</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"/>
<label id="slytherin" for="tab-2">Slytherin</label>
<div class="content slytherin">
<h3>HP Chars in Slytherin</h3>
<ul class="slytherin-students">
<li>Draco Malfoy</li>
<li>Narcissa Black</li>
<li>Lucius Malfoy</li>
<li>Severus Snape</li>
<li>Tom Riddle</li>
<li>Dolores Umbridge</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1"/>
<label for="tab-3" id="ravenclaw">Ravenclaw</label>
<div class="content ravenclaw">
<h3>HP Chars in Ravenclaw</h3>
<ul class="ravenclaw-students">
<li>Lisa Turpin</li>
<li>Luna Lovegood</li>
<li>Gilderoy Lockhart</li>
<li>Garrick Ollivander</li>
<li>Padma Patil</li>
<li>Sybil Trelawney</li>
</ul>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4" id="hufflepuff">Hufflepuff</label>
<div class="content hufflepuff">
<h3>HP Chars in Hufflepuff</h3>
<ul class="hufflepuff-students">
<li>Cedric Diggory</li>
<li>Newton Scamander</li>
<li>Nymphadora Tonks</li>
<li>Pomona Sprout</li>
<li>Susan Bones</li>
<li>Teddy Lupin</li>
</ul>
</div>
</div>
</div>
</body>
</html>