Hướng dẫn tạo Tab đơn giản bằng Jquery cho trang HTML

1. Hình ảnh demo

Mã nguồn demo : Download tại đây

2.Các bước thực hiện

a.HTML : phần nội dung trang web

Phần tiêu đề tab:
Ở đây các bạn cần lưu ý 2 điều:
1. 2 class set number và number trong 2 thẻ a. 2 class này liên quan đến phần script sẽ nói đến ở cuối bài.
2. 2 title tab1 và tab2 trong 2 thẻ a. Phần hiển thị sản phẩm trong từng tab phải có id tương ứng với từng tab. Chẳng hạn, phần hiển thị sản phẩm trong tab 1 sẽ nằm trong thẻ ‹div id=”tab1”›
- Phần nội dung trong từng tab:
Hiển thị trang web khi chưa có CSS

b.CSS : phần định dạng hiển thị cho web

Trong bài hướng dẫn này , chúng ta sử dụng một file css có tên là style.css để định dạng cho menu. Nếu bạn nào chưa nắm rõ về phần nhúng css vào html , xin hãy vào đây.
1. Định dạng phần bao ngoài và tiêu đề từng tab.
2. Định dạng hiển thị sản phẩm trong mỗi tab.

c.Jquery : điều khiển việc hiện tab khi click chuột

Chúng ta có một đoạn code javascript được viết trực tiếp trong trang html. Đoạn code này có tác dụng xử lý khi ta click chuột vào các tab sẽ hiển thị ra phần nội dung của mỗi tab tương ứng. Bạn nào chưa hiểu rõ về cách nhúng javascript vào HTML, xin hãy vào đây.
- Mỗi tab phải nằm trong thẻ ‹a class=”number”›
- Tab nào có thẻ a là ‹a class=”set number”› sẽ được mặc định là tab được click vào khi load trang web.
- Để sử dụng được đoạn code javascript trên ta phải khai báo thư viện js trong trang html.