ฉันจำได้ว่าตอนที่ฉันทดสอบระบบการสอบสำหรับผู้สูงอายุของฉันฉันเห็นหน้าการตรวจสอบของพวกเขาที่สามารถซ่อนข้อมูลส่วนหนึ่งของผู้สมัครทางด้านซ้าย ในเวลานั้นฉันรู้สึกสูงและมีมนุษยธรรมมาก ตอนนี้ฉันได้เรียนรู้ JavaScript แล้วฉันยังสามารถใช้ฟังก์ชั่นนี้ได้ มาแสดงกันเถอะ
1. การออกแบบหน้า:
(1). html code:
<title> คอลัมน์ js </title> <style type = "text/css">. การจัดตำแหน่ง {text-align: center; } </style> </head> <script language = "JavaScript" type = "text/javaScript"> // ...... </script> <body> <body> <tr> <td id = "lanmu"> <p> <a href = "#"> คอลัมน์ 1 </a> </p> href = "#"> คอลัมน์ 3 </a> </p> <p> <a href = "#"> คอลัมน์ 4 </a> </p> <p> <a href = "#"> คอลัมน์ 4 </a> </p> <p> <a href = "#"> คอลัมน์ 1 </a> href = "#"> คอลัมน์ 3 </a> </p> <p> <a href = "#"> คอลัมน์ 4 </a> </p> <p> <a href = "#"> คอลัมน์ห้า </a> </p> </td> <td> <td> นี่คือพื้นที่เนื้อหา! </td> </tr> </table> </body> </html>(2). หมายเหตุ: ที่จริงแล้วหน้านี้ง่ายมากคุณต้องใช้ตารางที่มีหนึ่งแถวและสามคอลัมน์ ส่วนแรกวางชื่อคอลัมน์และส่วนที่สามเป็นเนื้อหาหลัก มีรูปลูกศรด้านซ้าย (ขวา) อยู่ตรงกลาง ฉันเคยคิดมากเกินไปและคิดว่ามันเป็นตัวควบคุมที่ยอดเยี่ยมมาก
2. JavaScript Code:
<script language = "javascript" type = "text/javaScript"> ฟังก์ชั่นซ่อน () // คลิกลูกศรซ้ายเพื่อซ่อนส่วนคอลัมน์ {// ขั้นตอนที่ 1: ซ่อนเอกสารรายการคอลัมน์ getElementById ("lanmu"). style.display = "ไม่มี"; // ขั้นตอนที่ 2: แทนที่ภาพลูกศรในเวลาเดียวกัน เหตุการณ์ที่ตอบสนองต่อลูกศรซ้ายคือการแสดง show () document.getElementById ("pic"). innerhtml = "<img src = 'image /right.png' onclick = 'show ()' />"; } function show () // คลิกลูกศรขวาเพื่อแสดงชิ้นส่วนคอลัมน์ที่ซ่อนอยู่ {// ขั้นตอนที่ 1: แสดงรายการคอลัมน์รายการ document.getElementById ("lanmu"). style.display = ""; // ขั้นตอนที่ 2: เปลี่ยนภาพลูกศรในเวลาเดียวกัน เหตุการณ์ที่ตอบสนองต่อลูกศรซ้ายคือการซ่อน hide () document.getElementById ("pic"). innerhtml = "<img src = 'image /left.png' onclick = 'ซ่อน ()' />"; } </script>(1) เอฟเฟกต์:
(2) หมายเหตุ: "ลูกศรซ้าย" จะปรากฏขึ้นครั้งแรก การคลิกที่รูปภาพจะตอบสนองต่อเหตุการณ์ซ่อน () ซ่อนส่วนคอลัมน์และเปลี่ยนลูกศรซ้ายเป็นลูกศรขวา เมื่อคลิก "ลูกศรขวา" เหตุการณ์การแสดง () จะได้รับการตอบกลับแสดงส่วนคอลัมน์ที่ซ่อนอยู่และลูกศรขวาจะถูกแทนที่ด้วยลูกศรซ้ายจากนั้นกลับไปที่สถานะเดิม นี่เป็นเรื่องง่ายและง่ายมากที่จะทำ
ผ่านขั้นตอนของการเรียนรู้ JavaScript มันรู้สึกน่าสนใจมาก เมื่อฉันไม่เคยรู้อะไรมาก่อนฉันคิดเสมอว่ามันยากกดดันตัวเองกับฉัน เมื่อฉันได้สัมผัสกับตัวเองฉันพบว่ามันเป็นเพียงแค่นั้นและค่อยๆพัฒนาความสนใจในการเรียนรู้ ตอนนี้เมื่อลงชื่อเข้าใช้เว็บไซต์หรือใช้ซอฟต์แวร์คุณจะพิจารณาโดยไม่สมัครใจว่าจะนำไปใช้งานได้อย่างไรและในที่ที่ต้องการการปรับปรุงและค่อยๆเข้าหามืออาชีพ
ยังมีอีกหลายสิ่งที่จะเรียนรู้ใน JavaScript วันนี้สิ่งที่เราแสดงเป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็ง เชียร์ด้วยความสนใจและความอยากรู้อยากเห็น!