Tab hoạt động 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 cụ 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

Tưởng tượng xây dựng

Thì các tab này nó sinh ra vận dụng để hiển thị các thể loại khác nhau theo từng tab khác nhau nha. Chúng ta sử dụng html, css để tạo bố cục và ứng dụng JS để hiểu các tab chuyển ứng dụng

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 tab khác nha

Mã HTML

Trước tiên các bạn cần phải mã cho mình một bộ khung nê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

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ản

Mã CSS

Để tab 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 that is. liên kết tab. active and. nội dung tab. active one is used to display color nền, color chữ còn lại used to display information of tab which them ta add class into

/* Liên kết tab */
. tab{
hiển thị. uốn cong;
}
. liên kết tab {
đường viền. không;
đường viền. không;
con trỏ. con trỏ;
chiều rộng. 100%;
đệm. 1rem;
cỡ chữ. 13px;
chuyển đổi văn bản. chữ hoa;
trọng lượng phông chữ. 600;
chuyển tiếp. 0. 2 giây dễ dàng;
}
. liên kết tab. di chuột{
nền. xanh da trời;
màu. #fff;
}
/* Tab đang hoạt động */
. liên kết tab. {
nền đang hoạt động. xanh da trời;
màu. #fff;
}

/* nội dung tab */
. tabcontent {
hiển thị. không;
}
/* Văn bản*/
. tabcontent p {
color. #333;
cỡ chữ. 16px;
}
/* nội dung tab đang hoạt động */
. nội dung tab. {
hiển thị đang hoạt động. chặn;
}

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

Mã Javascript

Đây chính là phần khác quan trọng trong nội dung bài viết ngày hôm nay. Tuy nó khá cần thiết nhưng nó cũng không quá khó đâ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 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ì thông tin trong thẻ thứ hai phải được hiển thị và cũng giống như thông tin 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 nên chúng ta mới sử dụng data-attribute và id để có khả năng lấy nội dung của từng tab không giống nhau

var tabLinks = tài liệu. truy vấnSelectorAll(“. liên kết tab”);
var tabContent = tài liệu. truy vấnSelectorAll(“. tabcontent”);

liên kết tab. forEach(function(el) {
el. addEventListener(“click”, openTabs);
});

function openTabs(el) {
var btn = el. Mục tiêu hiện tại; . tập dữ liệu. điện tử;
var electronic = btn.dataset.electronic; // lấy giá trị trong data-electronic

tabContent. forEach(function(el) {
el. danh sách lớp học. xóa(“đang hoạt động”);
});

liên kết tab. forEach(function(el) {
el. danh sách lớp học. xóa(“đang hoạt động”);
});

tài liệu. querySelector(“#” + điện tử). danh sách lớp học. add(“active”);
// Trả về phần tử đầu tiên có id=”” được thêm lớp đang hoạt động

btn. danh sách lớp học. add(“active”);
// các nút mà chúng ta nhấp vào sẽ được thêm lớp đang hoạt động
}

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 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 đấy là class thì getElementsByClassName

Để có thể chuyển tab chúng ta cần phải bắt sự kiện nhấp để có khả năng 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 các liên kết tab và nội dung tab thư nhất có thể đượ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 xóa xong thì liên kết tab và nội dung tab thứ hai có thể được thêm vào. tích cực

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

( Nguồn. Tổng hợp)

the end of the end

Qua bài viết trên của ATP Web đã cung cấp cho bạn đọc một số thông tin hữu ích. Hy vọng những thông tin trên 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é

Đọc tiếp