Khái niệm
Tabs Slider trong lập trình web là dạng tab điều hướng nội dung sử dụng HTML CSS và Javascript nhằm mục đích phân chia nội dung theo tab và ẩn hiện khi click vào menu điều hướng. Tabs Slider sẽ giúp cho trang web trở nên gọn gàng hơn nhờ việc được sắp xếp nội dung một cách hợp lí, ẩn bớt những nội dung dư thừa và giúp người dùng dể dàng điều hướng đến những phần nội dung quan tâm mà không cần đọc quá nhiều những thông tin không cần thiết.
Các thành phần trong 1 Tabs Slider
Trong 1 Tabs Slider sẽ gồm 2 thành phần:
- Navbar đảm nhiệm vai trò làm nút dẩn chuyển hướng đến phần nội dung nhất định.
- Tabs Content là nơi hiển thị những nội dung tương ứng với mục Navbar được click.
Những lưu ý khi xây dựng chức năng Tabs Slider
Khi xây dựng chức năng Tabs Slider cần chú ý những yếu tố quan trọng sau:
- Trong một trang web hoặc 1 page bất kì có thể có nhiều hơn một Tabs Slider, cần code thật chuẩn để chỉ cần code một lần và tất cả mọi Tabs Slider sau nếu có phát xin đều có thể sử dụng được ngay mà không cần code thêm gì.
- Các tiêu đề trong Navbar đảm nhiệm vai trò làm nút dẩn nên cần phải có nội dung cụ thể, bao quát tổng thể phần nội dung tabs Content.
- Không có bất kì 1 Navbar nào không chuyển hướng đến một nội dung cụ thể.
- Code phải gọn gàng, tường minh, dể đọc, dể hiểu.
Xây dựng chức năng Tabs Slider với HTML CSS và Javascript
body{
background-color: #202936;
color: #eee;
margin: 0;
font-family: system-ui;
}
.container{
width: 1000px;
max-width: 100%;
margin: auto;
}
.nav-tabs{
background-image: linear-gradient(
to bottom right, #25AEB8, #0DDB9F
);
padding: 0;
margin: 50px 0 0;
list-style: none;
display: flex;
max-width: fit-content;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
position: relative;
z-index: 1;
}
.nav-item{
font-weight: bold;
font-size: 20px;
padding: 20px;
width: 80px;
text-align: center;
border-right: 1px solid #1d868d;
transition: 0.5s;
cursor: pointer;
}
.nav-item:nth-last-child(1){
border-right: none;
}
.nav-item.active{
color: #555;
}
.bg-active{
background-color: #eee;
padding: 20px;
width: 80px;
position: absolute;
left: 0;
height: 100%;
z-index: -1;
transition: 0.5s;
}
.content-tabs{
padding: 30px;
background-color: #eee;
color: #555;
border-radius: 10px;
border-top-left-radius: 0;
min-height: 300px;
text-align: justify;
}
.content-tabs .tab{
display: none;
}
.content-tabs .tab.active{
display: block;
animation: showContent 0.5s ease-in-out 1;
}
@keyframes showContent{
from{
opacity: 0;
transform: translateY(100px);
}to{
opacity: 1;
transform: translateY(0);
}
}
Trong mỗi page sẽ có rất nhiều Tabs slider, trong mỗi Tabs slider sẽ gồm hai thành phần chín tương ứng với hai class nav-tabs và content-tabs.
Trạng thái active:
- nav-item nào được active thì sẽ đổi màu chử.
- tab-content nào được active thì sẽ hiện lên với display: block còn các tab còn lại sẽ bị ẩn đi.
Mối liên kết giửa Navtab và tabs content
Để có thể hiểu được Navtab nào trỏ đến phần nội dung nào ta cần tạo ra mối liên hệ cho chúng. Ở đây mình đã tạo ra một mỗi liên hệ như sau: với mỗi nav-item đều mang trong mình một thuộc tính data-target. Giá trị của data-target chính là id của tab content tương ứng mà navbar đó muốn trỏ tới.
Code Javascript cho chức năng Tabs Slider
let navtabs = document.querySelectorAll('.sliderTab');
navtabs.forEach(item => {
item.addEventListener('click', function(event){
if(event.target.classList.contains('nav-item')){
let lastActive = item.querySelector('li.active');
let newActive = event.target;
let bgActive = item.querySelector('.bg-active');
lastActive.classList.remove('active');
newActive.classList.add('active');
bgActive.style.left = newActive.offsetLeft + 'px';
let lastContentActive = item.querySelector('.tab.active');
let newContentActive = document.getElementById(newActive.dataset.target);
lastContentActive.classList.remove('active');
newContentActive.classList.add('active');
}
})
})
Đầu tiên ta sử dụng querySelectorAll để lấy hết tất cả Tabs Slider trong trang web. Sau đó tiến hành lắng nghe sự kiện click chuột lên mỗi tabs slider với addEventListener('click').
Khi bắt được sự kiện click chuột kiểm tra xem vị trí click chuột có phải vì trí của các nút nav-item không, nếu phải mới tiến hành sử lí tiếp. Tìm đến item nav-item active củ và xóa nó đi bằng cách xóa class active ở vị trí đó đi, thay vào đó kích hoạt trạng thái active ở item mới vừa click, vị trí của item mới chích là event.target.
Cuối cùng làm điều tương tự với khu vực tabs content, hủy bỏ trạng thái active ở tab được active trước đó và thay vào đó tìm đến tab mà nav-item mới active trỏ đến có thuộc tính data-target. Lấy giá trị của thuộc tính này bằng dataset.target và trỏ đến id tương ứng để hiện lên.