Việc đặt các khối văn bản ẩn giúp cải thiện cảm nhận trực quan của trang web - nó tải vào trình duyệt chính xác như người thiết kế đã thiết kế, bất kể lượng thông tin được đăng. Ngoài ra, nó còn thuận tiện hơn cho người truy cập - để tìm kiếm khối thông tin cần thiết, anh ta không phải xem qua toàn bộ mảng mà chỉ là những "mẹo nhỏ của tảng băng trôi".
Nó là cần thiết
Kiến thức cơ bản về HTML và JavaScript
Hướng dẫn
Bước 1
Sử dụng một hàm JavaScript tùy chỉnh để ẩn và hiển thị các khối văn bản mong muốn trong một trang HTML. Một chức năng chung cho tất cả các khối thuận tiện hơn nhiều so với việc thêm mã vào từng khối riêng biệt. Trong phần tiêu đề của mã nguồn của trang, hãy đặt các thẻ tập lệnh mở và đóng và giữa chúng tạo một hàm trống có tên, ví dụ: hoán đổi và một id tham số đầu vào bắt buộc: function swap (id) {}
Bước 2
Thêm hai dòng mã JavaScript vào nội dung của hàm, giữa các dấu ngoặc nhọn. Dòng đầu tiên phải đọc trạng thái hiện tại của khối văn bản - cho dù khả năng hiển thị của nó đang bật hay tắt. Có thể có một số khối như vậy trong một tài liệu, vì vậy mỗi khối phải có mã định danh riêng - chính hàm của nó nhận id làm tham số đầu vào duy nhất. Sử dụng mã định danh này, nó tìm kiếm khối cần thiết trong tài liệu, gán giá trị khả năng hiển thị / tàng hình (trạng thái của thuộc tính hiển thị) cho biến sDisplay: sDisplay = document.getElementById (id).style.display;
Bước 3
Dòng thứ hai sẽ thay đổi thuộc tính hiển thị của khối văn bản mong muốn thành ngược lại - ẩn nếu văn bản hiển thị và hiển thị nếu nó bị ẩn. Điều này có thể được thực hiện với mã sau: document.getElementById (id).style.display = sDisplay == 'none'? '': 'không ai';
Bước 4
Thêm biểu định kiểu sau vào phần tiêu đề: a {Con trỏ: con trỏ} Bạn sẽ cần biểu định kiểu này để hiển thị con trỏ chuột một cách chính xác khi bạn di chuột qua thẻ liên kết chưa hoàn chỉnh. Với sự trợ giúp của các liên kết như vậy, bạn tổ chức trong trang để chuyển đổi khả năng hiển thị / ẩn của các khối văn bản.
Bước 5
Đặt các liên kết chuyển đổi này trong văn bản trước mỗi khối ẩn và trong các khối ở cuối văn bản, hãy thêm một liên kết tương tự. Đính kèm văn bản ẩn trong thẻ span có đặt tính ẩn trong thuộc tính kiểu của chúng. Ví dụ: Mở rộng văn bản +++ Đây là văn bản ẩn --- Trong ví dụ này, nhấp vào liên kết ba dấu cộng sẽ gọi hàm trên trong sự kiện onClick, chuyển ID của khối được hiển thị. Và bên trong khối có một liên kết của ba minuses có cùng chức năng - nhấp vào nó sẽ ẩn văn bản.
Bước 6
Tạo số lượng khối văn bản cần thiết, tương tự như mô tả trong bước trước, hãy nhớ thay đổi các ID trong thuộc tính id của thẻ span và trong biến được sự kiện onClick chuyển đến hàm trong hai liên kết.
