Hôm nay ATP Web sẽ Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản 2022 công dụng rất phổ biến hiện nay trong các Trang Web.
Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản
Xây dựng ý tưởng
Thì thằng tabs này nó sinh ra vận dụng để hiển thị các thể loại khác nhau theo từng tabs khác nha. Chúng ta sử dụng html, css để làm layout và vận dụng JS để làm hiểu biết ứng chuyển tabs.
VD như Web linh kiện điện tử 3M trong phần hàng hóa nổi bật nó cũng chia ra làm ba tabs khác nha.
Code HTML
Trước tiên các bạn cần phải code cho mình một bộ khung nên có để tạo tabs cho nó. Trong tabs đấy có hai phần chính là tab links và tab content.
Tất cả sản phẩm
Vi điều khiển – Nhúng
Module ứng dụng
Hướng dẫn cách tạo thẻ Tab trong HTML đơn giảnCode CSS
Để mà tabs chúng ta dễ nhìn hơn, bố cục đẹ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 đó là .tablinks.active và .tabcontent.active một cái là sử dụng để hiển thị màu nền, màu chữ cái còn lại sử dụng để hiển thị thông tin của tab mà chúng ta add class vào.
/* 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;
}Hướng dẫn cách tạo thẻ Tab trong HTML đơn giảnCode Javascript
Đây chính là phần khá là quan trọng trong bài content ngày hôm. Tuy nó khá cần thiết nhưng nó cũng không quá khó lắm đâu.
Đầu tiên mình sẽ nói sơ qua giải thuật tí Như thế nào để chúng ta có khả năng chuyển tabs. Thì trong tabs link chúng ta có ba button thì khi click button thứ hai thì thông tin trong thẻ thứ hai phải được hiển thị và cũng giống như là thông tin trong thẻ button thứ ba và thứ nhất. Và các thẻ mà được add .active khi click vào button khác thì phải được remove.
Vì vậy nên chúng ta mới sử dụng data-attribute và id để có khả năng lấy được nội dung của từng tab không giống 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-electronictabContent.forEach[function[el] {
el.classList.remove[“active”];
}]; //lặp qua các tab content để remove class activetabLinks.forEach[function[el] {
el.classList.remove[“active”];
}]; //lặp qua các tab links để remove class activedocument.querySelector[“#” + electronic].classList.add[“active”];
// trả về phần tử đầu tiên có id=”” được add class activebtn.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ử phương thức getElementsByClassName mà lại dùng querySelectorAll thì câu trả của mình thì sử dụng cái nào cũng được cả nếu đấy là class thì getElementsByClassName.
Để có thể chuyển tab chúng ta cần phải bắt sự kiện click để có khả năng click vào các button để chuyển tab. Tham số el này là từ được viết tắt bởi từ element.
Thì mặc định tab links và tab content thư nhất có thể được add class sẵn. Nên khi chúng ta click vào tab links thứ hai thì tab links, tab content sẽ được chạy vòng lặp nếu thằng nào trong tab links hay tab content có add .active thì sẽ bị remove. Khi remove xong thì tab links và tab content thứ hai có thể được add .active
Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản[Nguồn: Tổng hợp]
Lời tổng kết
Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.
ATPWEB – XÂY DỰNG NGÔI NHÀ ONLINE
- Hotline: 0707 6666 56
- Fanpage: ATP Web
- Gmail:
- Website: //atpweb.vn/
Chủ Đề