Hướng dẫn tab trong html


Tab trong CSSTab HTML CSSN trong HTMLAnimation tab CSS

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.

<!– Tab links –>
<div class=”tabs”>
<button class=”tablinks active” data-electronic=”allproducts”>Tất cả sản phẩm</button>
<button class=”tablinks” data-electronic=”Microcontrollers”>Vi điều khiển – Nhúng</button>
<button class=”tablinks” data-electronic=”module”>Module ứng dụng</button>
</div>

<!– Tab content –>
<div class=”wrapper_tabcontent”>
<div id=”allproducts” class=”tabcontent active”>
<img src=”https://bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-949f885f-8d8a-445e-be5c-0cce06cdb4b1.jpg?v=1582441789000″ width=”100%”/>
<h3>Combo Trạm Hàn Hakko 936 + Sensor Hàn A1321</h3>
</div>

<div id=”Microcontrollers” class=”tabcontent”>
<img src=”https://bizweb.dktcdn.net/thumb/large/100/228/168/products/raspberry-pi-4-model-b.jpg?v=1566526980000″ width=”100%”/>
<h3>Raspberry Pi 4 Model B 2019</h3>
</div>

<div id=”module” class=”tabcontent”>
<img src=”//bizweb.dktcdn.net/thumb/large/100/228/168/products/sp1-96b83938-650f-4f51-8b0a-61ee9f8f9039.jpg?v=1580721383000″ width=”100%”/>
<h3>Module Khuếch Đại Âm Thanh Bluetooth Stereo 30W/40W Công Suất Cao XY-P40W</h3>
</div>
</div>

Lưu ý: Mình sử dụng codepen.io để code tạo tabs, các bạn cũng có thể sử dụng các text editor h

Trong tab links các bạn tạo cho mình các button trong button này chứa các data- attributes. Để có thể truy vấn vào được các tab content mục tiêu là vận dụng tab links để chuyển các tabs.

Kế tiếp là trong tab content các bạn cho mình mỗi content một id khác nhau nhưng cần giống các giá trị trong data-attributes. Còn nội dung như thế nào thì

Bạn có thể tự custom theo ý muốn.

Các bạn để ý trong button trước tiên của tab links chúng ta sẽ thấy thêm một class nữa đấy là active, vậy class active đấy 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 tab content.

Lưu ý: Mình dùng codepen.io để code tạo tabs, các bạn cũng có khả năng sử dụng các text editor hay IDE khác để code tạo tabs nha.

Hướng dẫn tab trong html
Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

Code 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 tab trong html
Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

Code 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-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ử 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 tab trong html
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: https://atpweb.vn/