วิธีการขยาย & ยุบข้อความใน HTML

HTML 5 สัญญาเว็บไซต์เชิงโต้ตอบที่สมบูรณ์ แต่ในเวลานี้เบราว์เซอร์แตกต่างกันในการใช้งานคุณลักษณะและธุรกิจจำนวนมากยังไม่ได้ปรับใช้เบราว์เซอร์ที่รองรับมาตรฐานใหม่ ถึงกระนั้นก็ตามการมีปฏิสัมพันธ์ที่หลากหลายสามารถนำไปใช้กับเบราว์เซอร์ปัจจุบันได้ สำหรับผู้ที่มีประสบการณ์ JavaScript เล็กน้อยลองใช้คุณสมบัติ InnerHTML ของแท็ก div เพื่อขยายและทำสัญญาโครงร่างและเพิ่มความช่วยเหลือเชิงโต้ตอบให้กับเว็บไซต์ของคุณ

สร้างโครงการใหม่

เปิดเครื่องมือพัฒนาเว็บไซต์ที่คุณชื่นชอบและสร้างเว็บไซต์ใหม่ เครื่องมือ Visual Studio ของ Microsoft จะถูกใช้ที่นี่เนื่องจากสามารถดาวน์โหลดเวอร์ชัน WebDev ได้ฟรีและมีเว็บเซิร์ฟเวอร์ในตัว

สร้างหน้า HTML ใหม่

สร้างหน้าใหม่ default.htm คลิก "โครงการ", "เพิ่มรายการ" จากนั้นเลือก "หน้า HTML" และตั้งชื่อ default.htm หากไฟล์ default.aspx มีอยู่แล้วให้ลบออก สลับเป็นมุมมอง HTML หรือมาร์กอัปและเพิ่มรหัสต่อไปนี้หลังแท็ก

หน้าตัวอย่าง

หน้าตัวอย่าง

1 ชื่อ 1

2 ชื่อ 2

แท็ก h3 สร้างส่วนหัวของหน้าชื่อ“ หน้าตัวอย่าง” ตามด้วยโครงร่างสองบรรทัด แต่ละบรรทัดเริ่มต้นด้วยตัวเลขเครื่องหมายคำถามและชื่อเรื่อง เครื่องหมายคำถามล้อมรอบด้วยจุดยึด ((แท็กที่เปลี่ยนเป็นลิงก์แบบคลิกได้) ตามชื่อแต่ละหัวข้อเราได้เพิ่มแท็ก div ว่างที่สามารถแทรกข้อความเพิ่มเติมได้

เพิ่มจาวาสคริปต์

เพิ่มฟังก์ชั่นจาวาสคริปต์ที่สามารถเปิดใช้งานโดยแต่ละลิงค์เครื่องหมายคำถามดังนี้:

แต่ละลิงก์เรียกฟังก์ชัน JavaScript help_click ผ่าน div tagname และข้อความเพิ่มเติม ฟังก์ชันจะทดสอบก่อนเพื่อดูว่าแท็ก div ว่างเปล่าหรือไม่ (div.innerHTML ==“”) หากแท็กว่างเปล่ารหัสจะเพิ่มตัวแบ่งบรรทัด (

) อักขระสามตัว () ตามด้วยข้อความ หาก div มีข้อความอยู่แล้วมาร์กอัปภายในแท็ก div จะถูกล้าง

ทดสอบหน้าใหม่

ทดสอบรหัส สำหรับ Visual Studio ให้คลิกปุ่ม“ F5” เมื่อหน้าดังกล่าวปรากฏขึ้นให้คลิกที่เครื่องหมายคำถามตัวใดตัวหนึ่ง ครั้งแรกที่คลิกลิงก์ในบรรทัดที่ 1 เค้าร่างจะขยายเพื่อรวมข้อความ“ ข้อความเพิ่มเติมสำหรับชื่อ 1” ครั้งที่สองที่ลิงก์ได้รับการคลิกข้อความจะหายไป ด้วยโค้ดโฆษณาเล็ก ๆ น้อย ๆ เทคนิคเดียวกันนี้สามารถใช้เพื่อสร้างมุมมองแบบต้นไม้โครงร่างที่ซับซ้อนหรือเพื่อแสดงและซ่อนข้อความช่วยเหลือ