Hướng dẫn tạo tabs cho website đơn giản bằng HTML, CSS, JavaScript

Tab là một form khá phổ biến và quen thuộc với nhiều website. Vậy họ đã tạo ra những kiểu tab đó bằng cách nào? Hôm nay, mình sẽ hướng dẫn cho các bạn cách đơn giản để tạo ra tabs với HTML, CSS và JavaScript.

Để làm được bạn phải biết sơ qua về HTMl, CSS, và JS (javascript). 


Bước 1: Tạo giao diện cho tabs bằng HTML và CSS:

Đầu tiên là code HTML. Gồm có 2 layout chính đó là layout cho tab (class: tab-menu) và layout cho nội dung tab (class: content-tab).
Chèn code HTML này trong thẻ <body>:

Giờ thì style lại cho nó đẹp tí. Chèn code CSS sau vào <head>:

Kết quả sẽ được như sau:


Bước 2: Đây là bước quan trọng nhất, đó là viết JS xử lý sự kiện click cho các tab:
Chèn đoạn code JS sau vào thẻ <head> nhớ đặt nó trong thử <script>:

Và đây là kết quả:

Để lại bình luận

avatar
  Đăng ký theo dõi  
Thông báo về