แสดงและซ่อนข้อความหรือรูปภาพด้วย CSS และ JavaScript

สร้างประสบการณ์การใช้งานแบบแอ็พพลิเคชันบนเว็บไซต์ของคุณ

Dynamic HTML (DHTML) ช่วยให้คุณสามารถสร้างประสบการณ์การใช้งานบนเว็บไซต์ของคุณได้โดยลดความถี่ที่ต้องโหลดทั้งหน้า ในแอพพลิเคชันเมื่อคุณคลิกที่บางสิ่งบางอย่างแอพพลิเคชันจะเปลี่ยนไปทันทีเพื่อแสดงเนื้อหาเฉพาะหรือเพื่อให้คำตอบแก่คุณ

ในทางกลับกันหน้าเว็บมักจะต้องโหลดใหม่หรือต้องโหลดหน้าใหม่ทั้งหมด ซึ่งอาจทำให้ประสบการณ์ของผู้ใช้ไม่เป็นระเบียบมากขึ้น ลูกค้าของคุณต้องรอให้หน้าแรกโหลดแล้วรออีกครั้งเพื่อให้หน้าเว็บที่สองโหลดและอื่น ๆ

ใช้ & lt; div & gt; ปรับปรุงประสบการณ์ผู้ชม

การใช้ DHTML หนึ่งในวิธีที่ง่ายที่สุดในการปรับปรุงประสบการณ์นี้ก็คือให้องค์ประกอบของ div สลับและปิดเพื่อแสดงเนื้อหาเมื่อมีการร้องขอ องค์ประกอบ div กำหนดส่วนติดต่อตรรกะบนหน้าเว็บของคุณ คิด div เป็นกล่องที่อาจมีย่อหน้าหัวเรื่องลิงก์รูปภาพและแม้แต่ div อื่น ๆ

สิ่งที่คุณต้องการ

ในการสร้าง div ที่สามารถสลับและปิดคุณต้องมีสิ่งต่อไปนี้:

ลิงก์การควบคุม

ลิงก์ควบคุมคือส่วนที่ง่ายที่สุด เพียงแค่สร้างลิงก์เหมือนกับที่คุณต้องการไปยังหน้าอื่น ตอนนี้ปล่อยแอตทริบิวต์ href ไว้ว่าง

เรียนรู้ HTML

วางที่ใดก็ได้ในหน้าเว็บของคุณ

Div เพื่อแสดงและซ่อน

สร้างองค์ประกอบ div ที่คุณต้องการแสดงและซ่อน ตรวจสอบว่า div ของคุณมีรหัสเฉพาะอยู่ ในตัวอย่างรหัสเฉพาะคือการ เรียนรู้ HTML

นี่คือคอลัมน์เนื้อหา มันเริ่มต้นที่ว่างเปล่ายกเว้นข้อความคำอธิบายนี้ เลือกสิ่งที่คุณต้องการเรียนรู้ในคอลัมน์การนำทางที่ด้านซ้าย ข้อความจะปรากฏด้านล่าง:

เรียนรู้ HTML
  • คลาส HTML ฟรี
  • HTML Tutorial a>
  • XHTML คืออะไร

    CSS เพื่อแสดงและซ่อน Div

    สร้างสองชั้นเรียนสำหรับ CSS ของคุณ: หนึ่งเพื่อซ่อน div และอื่น ๆ เพื่อแสดง คุณมีสองตัวเลือกสำหรับการแสดงผลและการแสดงผล

    จอแสดงผลจะนำ div ออกจากการไหลของหน้าเว็บและการเปิดเผยจะเปลี่ยนแปลงวิธีที่เห็น นักเขียนบางคนชอบการ แสดง แต่บางครั้ง การมองเห็น ก็มีความหมายเช่นกัน ตัวอย่างเช่น:

    ถูกซ่อน {display: none; } .unhidden {display: block; }

    ถ้าคุณต้องการใช้การมองเห็นจากนั้นเปลี่ยนชั้นเรียนเหล่านี้ไปที่:

    ซ่อน {ทัศนวิสัย: ซ่อน; } .unhidden {visibility: visible; }

    เพิ่มคลาที่ซ่อนไว้ลงใน div ของคุณเพื่อให้มีการซ่อนไว้ในหน้าเว็บ:

    class = "hidden" >

    JavaScript เพื่อให้การทำงาน

    สคริปต์ทั้งหมดนี้มีให้ดูที่ชุดปัจจุบันที่ตั้งไว้ใน div ของคุณและสลับให้เป็น unhidden หากมีการทำเครื่องหมายว่าเป็น hidden หรือ vice versa

    นี่เป็นเพียงไม่กี่บรรทัดของ JavaScript เท่านั้น วางข้อมูลต่อไปนี้ไว้ในส่วนหัวของเอกสาร HTML ของคุณ (ก่อนแท็ก :