Làm thế nào để sử dụng jQuery để tạo giao diện theo thẻ trong CSS3

Video: Hướng dẫn xây dựng giao diện web đơn giản với HTML CSS 2025

Đối với một số trang web một giao diện theo thẻ là phương pháp tốt nhất để hiển thị thông tin CSS3 có mã để sử dụng phương thức jQuery để tạo một giao diện theo thẻ

$ (function () {// Tạo các biến để giữ dữ liệu tạm thời var TabHeads = "; var TabContent ="; // Lấy tệp tin dữ liệu XML và xử lý dữ liệu XML () "XMLTabData.xml", function (data) {// Định vị từng mục Heading và sử dụng nó để // tạo một tiêu đề tab $ (data) find ("Heading") each (function () {TabHeads + = "
" + $ (this) attr ("caption") + "
";}) // Thêm dữ liệu vào khu vực tiêu đề $ (" # Headings ") append (TabHeads); // Xác định vị trí mỗi Content và sử dụng nó để // tạo nội dung tab. () "+ $ (this) text () +" ";}); / / Thêm dữ liệu vào khu vực nội dung của thẻ (tab Content =" 999 ". $ ("# Tabs "). nối thêm (TabContent); // Hoàn thành quá trình bằng cách hiển thị // tab. $ ("Tabs #"). tabs ();});}); Mã bắt đầu bằng cách tạo hai biến: TabHeads và TabContent, để chứa dữ liệu được sử dụng để điền vào giao diện theo thẻ. Thông tin này cuối cùng được thêm vào hai thẻ HTML, như được hiển thị ở đây:

Phương thức get () lấy tệp tin XML, XMLTabData. XML và đặt nội dung trong dữ liệu. Dữ liệu gì chứa là một tệp tin XML hoàn chỉnh được chuyển tới một chức năng vô danh (tên không có tên) mà bạn xác định là: function (data) {}. Hàm được thực thi khi quá trình thu hồi dữ liệu hoàn tất, vì vậy nó hoạt động như một callback cho dữ liệu không đồng bộ.

Tất cả những gì bạn cần biết là tệp XML chứa các phần tử chứa dữ liệu được sử dụng để tạo các mục tab, cũng như các phần tử chứa dữ liệu được đặt trong mỗi tab. Trong trường hợp này, Tab 1 sẽ là một tiêu đề và "Đây là một số nội dung cho Tab 1." sẽ là nội dung cho tab đó.

Tất cả thông tin tiêu đề xuất hiện trong các phần tử. Mã yêu cầu jQuery tìm () mỗi phần tử và xử lý chúng mỗi lần bằng cách sử dụng phương thức each (). Mỗi phương thức () tạo ra một vòng lặp tự động cung cấp quyền truy cập tới từng phần tử thông qua biến này. Các tiêu đề của tab được lưu trữ trong một danh sách không có thứ tự ( ), Tiêu đề, đã là một phần của HTML cho trang ví dụ.

, Headings. Nội dung có thể là bất cứ điều gì - bao gồm các điều khiển được sử dụng cho ví dụ giao diện theo thẻ trước đó. Vấn đề quan trọng nhất cần xem xét là làm thế nào để lưu trữ thông tin trong tệp XML.Đảm bảo bạn thoát bất kỳ thẻ nào để chúng không bị hiểu sai là các phần tử XML.