Đôi khi, khi bố trí một trang web, cần phải ẩn một số phần tử được đặt trong đó. Ví dụ: nếu bạn muốn khách truy cập không nhìn thấy các nút gửi biểu mẫu cho đến khi tất cả các trường bắt buộc được điền vào. Hoặc nếu nút không nhằm mục đích sử dụng cho khách truy cập, nhưng tập lệnh được đặt trên trang này nên "nhấp" vào nút đó.
Hướng dẫn
Bước 1
Sử dụng thuộc tính hiển thị của Trang tính kiểu xếp tầng (CSS) để tắt hoặc hiển thị các phần tử trang mong muốn. Theo tiêu chuẩn quốc tế, thuộc tính này có thể được gán nhiều hơn một chục giá trị chỉ định các phương pháp hiển thị khác nhau. Tuy nhiên, chỉ có bốn là trình duyệt chéo (tức là hoạt động trên tất cả các trình duyệt chính). Trong số bốn giá trị này, không có giá trị nào bạn cần, cho phép bạn ẩn phần tử trang mong muốn.
Bước 2
Tạo bộ hướng dẫn CSS bắt buộc. Ở dạng đơn giản nhất, nó có thể trông giống như sau: button {display: none;} Trong trường hợp này, trang sẽ không hiển thị tất cả các nút bằng thẻ….
Bước 3
Thêm dấu hiệu cho tên lớp trong hướng dẫn nếu bạn chỉ muốn ẩn một nút hoặc một nhóm nút cụ thể. Ví dụ: đặt tên cho một lớp như vậy là HideBtns và thêm tên này vào câu lệnh CSS: button. HideBtns {display: none;} Thêm thuộc tính lớp vào nút mong muốn trong mã HTML của trang và gán cho nó giá trị HideBtns: hidden button
Bước 4
Ví dụ: áp dụng thuộc tính hiển thị với giá trị không cho phần tử mẹ, nếu bạn muốn, để ẩn không chỉ nút mà cả các phần tử khác của biểu mẫu web. Biểu mẫu được coi là "cha" của tất cả các phần tử được đặt giữa thẻ và. Ví dụ:
Tại đây, một trường văn bản và một nút để gửi giá trị đã nhập được đặt bên trong biểu mẫu. Biểu mẫu được gán cho một lớp có tên HideForm, vì vậy để ẩn cả trường nhập và nút, bạn cần thay đổi câu lệnh CSS như sau: form. HideForm {display: none;}
Bước 5
Đặt mã đã chuẩn bị trong ví dụ trên vào tiêu đề của tài liệu web (giữa các thẻ và). Để cho trình duyệt của khách truy cập biết rằng đây là mã CSS, mã này phải được đặt giữa các thẻ kiểu HTML mở và đóng:
button. HideBtns {display: none;}
