Hướng dẫn này sẽ giải thích cách tạo tab bằng CSS và JavaScript.
Làm cách nào để tạo tab bằng CSS và JavaScript?
Phần này thực hiện hướng dẫn từng bước để tạo tab bằng CSS và JavaScript.
Bước 1: Tạo cấu trúc tab bằng HTML
Trước tiên, hãy xem mã HTML tạo cấu trúc tab HTML:
< id id = 'tab1' trong một cái nhấp chuột = 'Đầu tiên()' > Trang chủ div >
< id id = 'tab2' trong một cái nhấp chuột = 'thứ hai();' > Về div >
< id id = 'tab3' trong một cái nhấp chuột = 'ngày thứ ba();' > Liên hệ chúng tôi div >
< anh />
< id id = 'cont1' > Chào mừng đến với Linuxhint ! div >
< id id = 'tiếp2' > GIÁO DỤC CÔNG NGHỆ
Chúng tôi đã xây dựng nhiều sản phẩm để giúp bạn tìm hiểu về Linux, Lập trình, Khoa học Máy tính, v.v.
div >
< id id = 'tiếp3' >
Bạn có thể liên hệ với nhóm của chúng tôi tại biên tập viên AT linuxhint DOT com.
div >
Trong các dòng mã trên:
- Các ' Thẻ ” thêm phần tử div có id “tab1” và phần tử đính kèm “ trong một cái nhấp chuột ” sự kiện để thực thi liên kết “ Đầu tiên() ” hoạt động khi nó được nhấp vào. Phần tử này hoạt động như một tab HTML.
- Phương pháp trên được thực hiện cho hai phần tử div tiếp theo.
- Các '
Thẻ ” thêm dấu ngắt dòng.- Các '
Thẻ ” lại chèn phần tử div có id được gán là “cont1”. Phần tử này hiển thị nội dung của tab đã tạo trong một khối.- Hai cái tiếp theo “
Thẻ ” cũng thêm các phần tử div với id được chỉ định của chúng.
Bước 2: Tạo kiểu tab bằng CSSBây giờ, hãy áp dụng các thuộc tính tạo kiểu CSS để tùy chỉnh các tab và nội dung của chúng theo lựa chọn của bạn:
< phong cách >
#tab1, #tab2, #tab3 {
trôi nổi : bên trái ;
phần đệm : 5px 10px 5px 10px ;
lý lịch : màu cam ;
màu sắc : #FFFFFF ;
lề : 0px 5px 0px 5px ;
con trỏ : con trỏ ;
ranh giới - bán kính : 3px ;
}
#tab1 : di chuột, #tab2 : di chuột, #tab3 : bay lượn {
lý lịch : màu xanh lá ;
}
#cont1, #cont2, #cont3 {
chiều rộng : 300px ;
chiều cao : 100px ;
phần đệm : 40px ;
nét chữ - kích cỡ : trung bình ;
nét chữ - gia đình : 'Times New Roman' , Thời gian, serif ;
ranh giới : 2px màu cam đậm ;
ranh giới - bán kính : 7px ;
trưng bày : không có ;
}
phong cách >Trong đoạn mã đã nêu:
- Đầu tiên, truy cập vào “ tab ” bằng cách sử dụng id được chỉ định và tùy chỉnh chúng thông qua các thuộc tính kiểu sau (float, đệm, nền, màu sắc, lề: 0px 5px 0px 5px, con trỏ và bán kính đường viền).
- Tiếp theo, đính kèm “ bay lượn ” trình xử lý sự kiện với các tab để thay đổi màu nền khi người dùng di chuột qua chúng.
- Sau đó, truy cập vào “ nội dung tab ” được lưu trữ trong các phần tử div có id là “cont1”, “cont2” và “cont3”. Bây giờ, hãy áp dụng các thuộc tính kiểu sau (chiều rộng, chiều cao, phần đệm, cỡ chữ, họ phông chữ, đường viền, bán kính đường viền và hiển thị) trên chúng.
Bước 3: Thêm chức năng vào tab bằng JavaScriptCuối cùng, thêm chức năng vào các tab đã tạo với sự trợ giúp của JavaScript:
< kịch bản >
chức năng đầu tiên ( ) {
tài liệu. getElementById ( 'cont1' ) . phong cách . trưng bày = 'khối' ;
tài liệu. getElementById ( 'tiếp2' ) . phong cách . trưng bày = 'không có' ;
tài liệu. getElementById ( 'tiếp3' ) . phong cách . trưng bày = 'không có' ;
}
chức năng thứ hai ( ) {
tài liệu. getElementById ( 'tiếp2' ) . phong cách . trưng bày = 'khối' ;
tài liệu. getElementById ( 'cont1' ) . phong cách . trưng bày = 'không có' ;
tài liệu. getElementById ( 'tiếp3' ) . phong cách . trưng bày = 'không có' ;
}
chức năng thứ ba ( ) {
tài liệu. getElementById ( 'tiếp3' ) . phong cách . trưng bày = 'khối' ;
tài liệu. getElementById ( 'cont1' ) . phong cách . trưng bày = 'không có' ;
tài liệu. getElementById ( 'tiếp2' ) . phong cách . trưng bày = 'không có'
}
kịch bản >Các dòng mã trên:
- Xác định một hàm có tên “ Đầu tiên ”.
- Trong định nghĩa hàm này, “ document.getElementById() Phương thức ” truy cập phần tử div có id là “cont1” và áp dụng “ phong cách ” thuộc tính có “ khối ” giá trị trên đó. Thuộc tính này sẽ hiển thị nội dung của tab mà người dùng click vào.
- Tiếp theo, “document.getElementById()” truy cập vào một div khác và áp dụng thuộc tính “style” có giá trị “none” để ẩn nó. Nó sẽ ẩn phần tử đó trên trang web.
- Phương pháp trên được thực hiện cho các phần tử div được truy cập tiếp theo. Điều này là do chức năng “đầu tiên” chỉ hiển thị nội dung của tab có giá trị thuộc tính “style” là “block” và ẩn các nội dung khác.
- Quy trình trên được thực hiện cho các hàm “thứ hai()” và “thứ ba()” tiếp theo.
đầu ra
Có thể thấy các tab được tạo thành công và hiển thị nội dung tương ứng khi người dùng nhấp vào.
Phần kết luận
Để tạo các tab, trước tiên hãy xây dựng cấu trúc của chúng bằng cách sử dụng “HTML”, sau đó tùy chỉnh chúng với sự trợ giúp của các thuộc tính tạo kiểu CSS. Các thuộc tính kiểu dáng được thêm vào mà không xuất bất kỳ biểu định kiểu bổ sung nào. Những đặc tính này làm cho các tab trở nên hấp dẫn và bắt mắt. Sau khi các tab được tạo và tùy chỉnh, hãy sử dụng ngôn ngữ lập trình JavaScript để thêm chức năng cho chúng. Hướng dẫn này đã giải thích một cách thực tế quy trình hoàn chỉnh để tạo tab bằng CSS và JavaScript.