การวางบล็อคข้อความที่ซ่อนไว้ช่วยเพิ่มการรับรู้ทางสายตาของหน้าเว็บไซต์ โดยจะโหลดเข้าสู่เบราว์เซอร์ตรงตามที่ผู้ออกแบบออกแบบ โดยไม่คำนึงถึงจำนวนข้อมูลที่โพสต์ นอกจากนี้ ผู้เข้าชมจะสะดวกกว่า - ในการค้นหากลุ่มข้อมูลที่จำเป็น เขาไม่ต้องมองผ่านอาร์เรย์ทั้งหมด แต่มีเพียง "เคล็ดลับของภูเขาน้ำแข็ง" เพียงเล็กน้อยเท่านั้น
มันจำเป็น
ความรู้พื้นฐานเกี่ยวกับ HTML และ JavaScript
คำแนะนำ
ขั้นตอนที่ 1
ใช้ฟังก์ชัน JavaScript ที่กำหนดเองเพื่อซ่อนและแสดงบล็อกข้อความที่ต้องการในหน้า HTML ฟังก์ชันทั่วไปสำหรับบล็อกทั้งหมดจะสะดวกกว่าการเพิ่มโค้ดแยกกัน ในส่วนหัวของซอร์สโค้ดของหน้า ให้วางแท็กสคริปต์เปิดและปิด และสร้างฟังก์ชันว่างที่มีชื่อระหว่างแท็ก เช่น swap และ id พารามิเตอร์อินพุตที่จำเป็นหนึ่งรายการ: function swap (id) {}
ขั้นตอนที่ 2
เพิ่มโค้ด JavaScript สองบรรทัดลงในเนื้อหาของฟังก์ชัน ระหว่างวงเล็บปีกกา บรรทัดแรกควรอ่านสถานะปัจจุบันของบล็อกข้อความ ไม่ว่าจะเปิดหรือปิดการมองเห็น ในเอกสารสามารถมีบล็อคได้หลายบล็อค ดังนั้นแต่ละบล็อคจะต้องมีตัวระบุของตัวเอง - เป็นหน้าที่ของเขาที่รับ id เป็นพารามิเตอร์อินพุตเท่านั้น ใช้ตัวระบุนี้ ค้นหาบล็อกที่จำเป็นในเอกสาร โดยกำหนดค่าการมองเห็น / การมองไม่เห็น (สถานะของคุณสมบัติการแสดงผล) ให้กับตัวแปร sDisplay: sDisplay = document.getElementById (id).style.display;
ขั้นตอนที่ 3
บรรทัดที่สองควรเปลี่ยนคุณสมบัติการแสดงของบล็อกข้อความที่ต้องการเป็นตรงกันข้าม - ซ่อนหากมองเห็นข้อความ และแสดงว่าซ่อนอยู่หรือไม่ สามารถทำได้โดยใช้รหัสต่อไปนี้: document.getElementById (id).style.display = sDisplay == 'none'? '': 'ไม่มี';
ขั้นตอนที่ 4
เพิ่มสไตล์ชีตต่อไปนี้ในส่วนหัว: a {เคอร์เซอร์: ตัวชี้} คุณจะต้องใช้สิ่งนี้เพื่อแสดงตัวชี้เมาส์อย่างถูกต้องเมื่อคุณวางเมาส์เหนือแท็กลิงก์ที่ไม่สมบูรณ์ ด้วยความช่วยเหลือของลิงก์ดังกล่าว คุณจัดระเบียบในหน้าเพื่อสลับการมองเห็น / การมองไม่เห็นของบล็อกข้อความ
ขั้นตอนที่ 5
วางลิงก์สลับเหล่านี้ในข้อความก่อนแต่ละบล็อกที่ซ่อนอยู่ และในบล็อกที่ส่วนท้ายของข้อความ ให้เพิ่มลิงก์ที่คล้ายกัน ใส่ข้อความที่มองไม่เห็นในแท็กช่วงที่มีการตั้งค่าการซ่อนตัวในแอตทริบิวต์รูปแบบ ตัวอย่างเช่น: ขยายข้อความ +++ นี่คือข้อความที่ซ่อนอยู่ --- ในตัวอย่างนี้ การคลิกที่ลิงก์สามบวกจะเรียกใช้ฟังก์ชันด้านบนในเหตุการณ์ onClick โดยส่งผ่าน ID ของบล็อกเพื่อให้มองเห็นได้ และภายในบล็อกมีลิงก์ของ minuses สามอันที่มีฟังก์ชันเหมือนกัน - การคลิกที่ลิงก์จะเป็นการซ่อนข้อความ
ขั้นตอนที่ 6
สร้างบล็อคข้อความตามจำนวนที่ต้องการ คล้ายกับที่อธิบายไว้ในขั้นตอนก่อนหน้า โดยอย่าลืมเปลี่ยน ID ในแอตทริบิวต์ id ของแท็ก span และในตัวแปรที่เหตุการณ์ onClick ส่งต่อไปยังฟังก์ชันในลิงก์ทั้งสอง