Hiển thị và Ẩn văn bản hoặc hình ảnh với CSS và JavaScript

Tạo trải nghiệm kiểu ứng dụng trên trang web của bạn

HTML động (DHTML) cho phép bạn tạo trải nghiệm kiểu ứng dụng trên trang web của mình, giảm tần suất toàn bộ trang phải được tải đầy đủ. Trong các ứng dụng, khi bạn nhấp vào một cái gì đó, ứng dụng ngay lập tức thay đổi để hiển thị nội dung cụ thể đó hoặc để cung cấp cho bạn câu trả lời của bạn.

Ngược lại, các trang web thường phải được tải lại hoặc toàn bộ trang mới phải được tải. Điều này có thể làm cho trải nghiệm người dùng bị rời rạc hơn. Khách hàng của bạn phải đợi trang đầu tiên tải và sau đó đợi lại để trang thứ hai tải, v.v.

Sử dụng & lt; div & gt; để cải thiện trải nghiệm người xem

Sử dụng DHTML, một trong những cách dễ nhất để cải thiện trải nghiệm này là bật và tắt các phần tử div để hiển thị nội dung khi được yêu cầu. Phần tử div xác định các phân chia hợp lý trên trang web của bạn. Hãy suy nghĩ về một div như một hộp có thể chứa đoạn văn, tiêu đề, liên kết, hình ảnh và thậm chí cả các div khác.

Những gì bạn cần

Để tạo một div có thể được bật và tắt, bạn cần như sau:

• Một liên kết để điều khiển div bằng cách bật và tắt nó khi được nhấp
• Div để hiển thị và ẩn
• CSS để tạo kiểu div ẩn hoặc hiển thị
• JavaScript để thực hiện hành động

Liên kết kiểm soát

Liên kết kiểm soát là phần dễ nhất. Đơn giản chỉ cần tạo một liên kết như bạn sẽ đến một trang khác. Để bây giờ, hãy để trống thuộc tính href.

Tìm hiểu HTML

Đặt địa điểm này ở bất cứ đâu trên trang web của bạn.

Div để Hiện và Ẩn

Tạo phần tử div bạn muốn hiển thị và ẩn. Hãy chắc chắn rằng div của bạn có một id duy nhất trên đó. Trong ví dụ, id duy nhất là tìm hiểu HTML .