บางครั้งเมื่อจัดวางหน้าเว็บจำเป็นต้องซ่อนองค์ประกอบบางอย่างที่อยู่ในนั้น ตัวอย่างเช่น หากคุณต้องการให้ผู้เยี่ยมชมไม่เห็นปุ่มส่งแบบฟอร์มจนกว่าจะกรอกข้อมูลในฟิลด์ที่จำเป็นทั้งหมด หรือหากปุ่มนั้นไม่ได้ตั้งใจให้ผู้เข้าชมใช้เลย แต่สคริปต์ที่วางอยู่บนหน้านี้ควร "คลิก" นั้น
คำแนะนำ
ขั้นตอนที่ 1
ใช้คุณสมบัติการแสดงผลของ Cascading Style Sheets (CSS) เพื่อปิดหรือเปิดการแสดงองค์ประกอบของหน้าที่ต้องการ ตามมาตรฐานสากล คุณสมบัตินี้สามารถกำหนดค่าได้มากกว่าหนึ่งโหลครึ่งซึ่งระบุวิธีการแสดงผลที่แตกต่างกัน อย่างไรก็ตาม มีเพียงสี่เบราว์เซอร์เท่านั้นที่เป็นแบบข้ามเบราว์เซอร์ (เช่น ทำงานในเบราว์เซอร์หลักทั้งหมด) ในบรรดาสี่สิ่งนี้ ไม่มีค่าใดที่คุณต้องการ ซึ่งช่วยให้คุณซ่อนองค์ประกอบของหน้าที่ต้องการได้
ขั้นตอนที่ 2
สร้างชุดแนวทาง CSS ที่จำเป็น ในรูปแบบที่ง่ายที่สุด อาจมีลักษณะดังนี้: ปุ่ม {แสดง: ไม่มี;} ในกรณีนี้ หน้าจะไม่แสดงปุ่มทั้งหมดโดยใช้แท็ก…
ขั้นตอนที่ 3
เพิ่มการบ่งชี้ชื่อคลาสในคำแนะนำ หากคุณต้องการซ่อนเพียงปุ่มเดียวหรือเฉพาะกลุ่มของปุ่ม ตัวอย่างเช่น ตั้งชื่อคลาส HideBtns และเพิ่มชื่อนี้ในคำสั่ง CSS: button. HideBtns {display: none;} เพิ่มแอตทริบิวต์ class ให้กับปุ่มที่ต้องการในโค้ด HTML ของหน้าและกำหนดค่า HideBtns: ปุ่มซ่อน
ขั้นตอนที่ 4
ใช้คุณสมบัติการแสดงผลที่มีค่า none กับองค์ประกอบหลัก ถ้าคุณต้องการ ตัวอย่างเช่น เพื่อซ่อนไม่เพียงแต่ปุ่ม แต่รวมถึงองค์ประกอบอื่นๆ ของเว็บฟอร์มด้วย แบบฟอร์มนี้ถือเป็น "พาเรนต์" ขององค์ประกอบทั้งหมดที่วางอยู่ระหว่างแท็ก และ ตัวอย่างเช่น:
ที่นี่ ฟิลด์ข้อความและปุ่มสำหรับส่งค่าที่ป้อนจะอยู่ภายในแบบฟอร์ม แบบฟอร์มถูกกำหนดให้กับคลาสชื่อ HideForm ดังนั้นเพื่อซ่อนทั้งช่องใส่และปุ่ม คุณต้องเปลี่ยนคำสั่ง CSS ดังนี้ form. HideForm {display: none;}
ขั้นตอนที่ 5
วางโค้ดที่เตรียมไว้ในตัวอย่างด้านบนในส่วนหัวของเอกสารเว็บ (ระหว่างแท็กและแท็ก) หากต้องการบอกเบราว์เซอร์ของผู้เยี่ยมชมว่านี่คือโค้ด CSS จะต้องอยู่ระหว่างแท็กรูปแบบ HTML ที่เปิดและปิด:
button. HideBtns {แสดง: ไม่มี;}