Hôm nay mình sẽ hướng dẫn các bạn xây dựng một chức năng rất phổ biến hiện nay trong các trang web đó là các tab
Tại Sao Mình Lại Hướng Dẫn Các Bạn Dựng Tab
Thì các bạn thử search trên google có rất nhiều bài viết hướng dẫn các bạn làm tab, các plugin như bootstrap tab,. Nhưng mà mình vẫn muốn viết bài để hướng dẫn các bạn. Mục đích của mình là gì?
Mục Đích Bài ViếtMục đích của bài viết này giúp các bạn ôn lại các kiến thức về html, css và js. Không phụ thuộc quá nhiều vào các thư viện giúp các bạn nâng cao khả năng tư duy, logic và khả năng giải quyết vấn đề
Bắt Đầu Thôi NàoLên Ý Tưởng
Thì các tab này nó sinh ra dùng để hiển thị các thể loại khác nhau theo từng tab khác nha. Chúng ta sử dụng html, css để tạo bố cục và sử dụng JS để hiểu các tab chuyển đổi.
Ví dụ như website linh kiện điện tử 3M trong phần sản phẩm nổi bật nó cũng chia ra làm ba tab khác nha.
Code Thôi Nào
Mã HTML
Trước tiên các bạn cần phải mã cho mình một bộ khung cần có để tạo các tab cho nó. Trong các tab có hai phần chính là liên kết tab và nội dung tab.
Trong tab liên kết bạn tạo cho mình các nút trong nút này chứa các thuộc tính dữ liệu. để có thể truy vấn được nội dung tab mục đích là sử dụng các liên kết tab để chuyển các tab.
Tiếp theo là trong nội dung tab, bạn cho mình mỗi nội dung một id khác nhau nhưng phải giống các giá trị trong thuộc tính dữ liệu. Còn nội dung như thế nào thì bạn có thể tự tùy chỉnh theo ý muốn.
Các bạn để ý trong nút đầu tiên của liên kết tab chúng ta sẽ thấy thêm một class nữa đó là active, vậy class active đó dùng để làm gì vậy thì chúng ta cùng xem ở phần css nha. Cũng tương tự như trong phần nội dung tab.
Tất cả sản phẩm
Vi điều khiển - Nhúng
Module ứng dụng
Combo Trạm Hàn Hakko 936 + Sensor Hàn A1321
Raspberry Pi 4 Model B 2019
Module Khuếch Đại Âm Thanh Bluetooth Stereo 30W/40W Công Suất Cao XY-P40W
lưu ý. Mình đang sử dụng codepen. io để code tạo tab, các bạn cũng có thể sử dụng text editor hay IDE khác để code tạo tab nha.
Các bạn cùng xem thử kết quả khi chúng ta code HTML cho nó nha.
Mã CSS
Để tab đó chúng ta dễ nhìn hơn, bố cục cục bộ đẹp mắt hơn thì chúng ta cần phải css cho nó. Trong phần CSS này mình không nói nhiều cho lắm bởi vì đây hoàn toàn là các kiến thức cơ bản.
Trong này các bạn css cho mình hai. active that is .tablinks.active and .tabcontent.active one one is used to display color nền, cái chữ cái màu sắc còn lại used to display content of tab which them ta add class into.
/* Tab Links */
.tabs{
display:flex;
}
.tablinks {
border: none;
outline: none;
cursor: pointer;
width: 100%;
padding: 1rem;
font-size: 13px;
text-transform: uppercase;
font-weight:600;
transition: 0.2s ease;
}
.tablinks:hover{
background:blue;
color:#fff;
}
/* Tab active */
.tablinks.active {
background:blue;
color:#fff;
}
/* tab content */
.tabcontent {
display: none;
}
/* Text*/
.tabcontent p {
color: #333;
font-size: 16px;
}
/* tab content active */
.tabcontent.active {
display: block;
}
Các bạn cùng xem thử kết quả khi ta code CSS cho nó nha
Cuối cùng thì công việc chia bố cục cũng như giao diện cho tab chúng ta cũng đã làm xong một cách cũng khá là ổn giờ đến công đoạn làm hiệu ứng chuyển tab
Mã Javascript
Đây là phần khá quan trọng trong bài viết ngày hôm nay. Tuy nó khá quan trọng nhưng nó cũng không quá khó đâu.
Trước tiên mình sẽ nói sơ lược về thuật toán nhỏ làm sao để chúng ta có thể chuyển tab. Thì trong liên kết tab chúng ta có nút ba thì khi bấm vào nút thứ hai thì nội dung trong thẻ thứ hai phải được hiển thị và cũng tương tự như nội dung trong nút thẻ thứ ba và nút thứ nhất. And the tags which are add. active when click to button other, must be remove.
Vì vậy chúng ta mới sử dụng thuộc tính dữ liệu và id để có thể lấy nội dung của từng tab khác nhau.
var tabLinks = document.querySelectorAll[".tablinks"];
var tabContent =document.querySelectorAll[".tabcontent"];
tabLinks.forEach[function[el] {
el.addEventListener["click", openTabs];
}];
function openTabs[el] {
var btn = el.currentTarget; // lắng nghe sự kiện và hiển thị các element
var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic
tabContent.forEach[function[el] {
el.classList.remove["active"];
}]; //lặp qua các tab content để remove class active
tabLinks.forEach[function[el] {
el.classList.remove["active"];
}]; //lặp qua các tab links để remove class active
document.querySelector["#" + electronic].classList.add["active"];
// trả về phần tử đầu tiên có id="" được add class active
btn.classList.add["active"];
// các button mà chúng ta click vào sẽ được add class active
}
Chúng ta để ý thấy hai dòng đầu tiên tại sao mình lại không sử dụng phương thức getElementsByClassName mà lại sử dụng querySelectorAll thì câu trả lời của mình thì sử dụng cái nào cũng được cả nếu đó là lớp thì getElementsByClassName.
Để có thể chuyển tab, chúng ta cần phải bắt sự kiện nhấp để có thể nhấp vào các nút để chuyển tab. tham số này là từ được viết tắt bởi từ phần tử.
Thì mặc định tab liên kết và nội dung tab thư mới nhất sẽ được thêm lớp sẵn. Nên khi chúng ta click vào liên kết tab thứ hai thì liên kết tab, nội dung tab sẽ được chạy vòng lặp nếu có kẻ nào trong liên kết tab hay nội dung tab có thêm. active then will be remove. Khi remove xong thì liên kết tab và nội dung tab thứ hai sẽ được thêm vào. tích cực
Chúng ta cùng xem thử nó chuyển tab như thế nào nhé
Các bạn có thể tham khảo full source code mình đã code trong codepen tại đây
Lời KếtVậy Là Xong bài viết Hướng Dẫn Xây Dựng Tab Với HTML, CSS và Javascript rồi nhé. Mình mong muốn sau bài viết này các bạn có thể nắm bắt thêm về các kiến thức HTML, CSS và JS. Học thêm được nhiều kiến thức tuy không mới lắm nhưng cũng có thể giúp được phần nào đó của các bạn. Có thể tự tay mình làm những dự án không cần thiết phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực ra những bài viết chủ đề hay và chất lượng hơn ủng hộ mình tại đây nha