Saya ingat ketika saya menguji sistem pemeriksaan untuk senior saya, saya melihat halaman pemeriksaan mereka yang dapat menyembunyikan bagian informasi dari kandidat di sebelah kiri. Pada saat itu, saya merasa sangat tinggi dan manusiawi. Sekarang saya telah belajar JavaScript, saya juga dapat menerapkan fungsi ini. Mari kita tunjukkan.
1. Desain halaman:
(1) .html kode:
<Title> js column </iteme> <style type = "text/css"> .alignment {text-align: center; } </tyle> </head> <bahasa skrip = "javascript" type = "text/javaScript"> // ...... </script> <body> <abl> <tr> <td id = "lanmu"> <p> <a href = "#"> Kolom 1 </a> </p> <p> <p> <a href = "#" href = "#"> kolom 3 </a> </p> <p> <a href = "#"> kolom 4 </a> </p> <p> <a href = "#"> kolom 4 href = "#"> Kolom 3 </a> </p> <p> <a href = "#"> kolom 4 </a> </p> <p> <a href = "#"> Kolom lima </a> </p> </td> <td> <span id = "pic"> <img src = "Image/leftny" ON "pic"> <img src = "left.pn" <td> Ini adalah area konten! </td> </tr> </able> </body> </html>(2). Catatan: Sebenarnya, halaman ini sangat sederhana, Anda hanya perlu tabel dengan satu baris dan tiga kolom. Bagian pertama menempatkan nama kolom, dan bagian ketiga adalah konten utama. Ada gambar panah kiri (kanan) di tengah. Dulu saya terlalu banyak berpikir dan berpikir itu adalah kontrol yang sangat luar biasa.
2. JavaScript Code:
<script language = "javascript" type = "text/javascript"> fungsi hide () // klik panah kiri untuk menyembunyikan bagian kolom {// Langkah 1: Sembunyikan Dokumen Daftar Kolom.GetElementById ("LANMU"). Style.Display = "None"; // Langkah 2: Ganti gambar panah secara bersamaan. Acara yang menanggapi panah kiri adalah untuk menampilkan show () document.getElementById ("pic"). InnerHtml = "<img src = 'image /right.png' ontClick = 'show ()' />"; } function show () // Klik panah kanan untuk menampilkan bagian kolom tersembunyi {// Langkah 1: Tampilkan daftar kolom Document.getElementById ("lanmu"). style.display = ""; // Langkah 2: Ubah gambar panah secara bersamaan. Acara yang menanggapi panah kiri adalah untuk menyembunyikan hide () document.geteLementById ("pic"). InnerHtml = "<img src = 'image /left.png' ontClick = 'hide ()' />"; } </script>(1) Efek:
(2) Catatan: "Panah kiri" awalnya ditampilkan. Mengklik gambar akan menanggapi acara Hide (), menyembunyikan bagian kolom, dan mengubah panah kiri ke panah kanan. Saat mengklik "Right Arrow", acara show () akan ditanggapi, menampilkan bagian kolom tersembunyi, dan panah kanan digantikan oleh panah kiri, dan kemudian kembali ke keadaan asli. Ini sebenarnya sangat sederhana dan mudah dilakukan.
Melalui tahap pembelajaran JavaScript ini, rasanya sangat menarik. Ketika saya tidak tahu apa -apa sebelumnya, saya selalu berpikir itu sulit, memberi saya tekanan psikologis pada saya. Ketika saya mengalaminya sendiri, saya menemukan bahwa hanya itu dan perlahan -lahan mengembangkan minat untuk belajar. Sekarang ketika masuk ke situs web atau menggunakan perangkat lunak, Anda secara tidak sengaja akan mempertimbangkan bagaimana hal itu diimplementasikan, di mana itu dilakukan dengan baik, dan di mana ia membutuhkan perbaikan, dan secara bertahap mendekati seorang profesional.
Masih banyak hal untuk dipelajari dalam JavaScript. Hari ini, apa yang kami tunjukkan hanyalah puncak gunung es. Terus bersorak dengan minat dan rasa ingin tahu!