CSS-CSS3


Home / Tài liệu CNTT / CSS-CSS3 / Cách tạo tabs bằng HTML, CSS và Javascript

Cách tạo tabs bằng HTML, CSS và Javascript

Các tab

Hiển thị kiểu tabs phù hợp cho các ứng dụng web trang đơn hoặc cho các trang web có khả năng hiển thị các chủ đề khác nhau trên cùng 1 trang:

Tạo các tab có thể chuyển đổi

Bước 1) Thêm HTML:

Tạo các nút để mở nội dung tab cụ thể. Tất cả các phần tử <div> với class="tabcontent"đều bị ẩn theo mặc định (với CSS & JS). Khi người dùng nhấp vào một nút – nó sẽ mở ra nội dung tab “khớp” với nút này.

Bước 2) Thêm CSS:

Tạo kiểu cho các nút và nội dung tab:

Bước 3) Thêm JavaScript:

Làm mờ trong các tab:

Nếu bạn muốn làm mờ nội dung tab, hãy thêm CSS sau:

Hiển thị một tab theo mặc định

Để mở một tab cụ thể khi tải trang, hãy sử dụng JavaScript để “nhấp” vào nút tab được chỉ định:

Đóng một tab

Nếu bạn muốn đóng một tab cụ thể, hãy sử dụng JavaScript để ẩn tab bằng một lần nhấp vào nút:

Như vậy chúng ta sẽ có 1 code hoàn chỉnh như sau:

Xem demo: https://www.w3schools.com/howto/howto_js_tabs.asp

Mục Lục