Menempatkan blok teks tersembunyi meningkatkan persepsi visual halaman laman web - memuatkan ke dalam penyemak imbas sama seperti yang dirancang oleh pereka, tanpa mengira jumlah maklumat yang disiarkan. Di samping itu, lebih mudah bagi pengunjung - untuk mencari sekumpulan maklumat yang diperlukan, dia tidak perlu melihat keseluruhan susunan, tetapi hanya "petua gunung es" kecil.
Ia perlu
Pengetahuan asas mengenai HTML dan JavaScript
Arahan
Langkah 1
Gunakan fungsi JavaScript khusus untuk menyembunyikan dan menampilkan blok teks yang diinginkan dalam halaman HTML. Fungsi umum untuk semua blok jauh lebih senang daripada menambahkan kod pada setiap blok secara berasingan. Di bahagian header dari kod sumber halaman, letakkan tag skrip pembuka dan penutup, dan di antara mereka membuat fungsi kosong dengan nama, misalnya, swap dan satu parameter input input yang diperlukan: fungsi swap (id) {}
Langkah 2
Tambahkan dua baris kod JavaScript ke badan fungsi, antara pendakap keriting. Baris pertama harus membaca keadaan blok teks semasa - sama ada penglihatannya hidup atau mati. Terdapat beberapa blok dalam dokumen, jadi masing-masing mesti mempunyai pengecam sendiri - fungsinya yang menerima id sebagai satu-satunya parameter input. Dengan menggunakan pengecam ini, ia mencari blok yang diperlukan dalam dokumen, memberikan nilai keterlihatan / ketidaklihatan (keadaan harta paparan) kepada pemboleh ubah sDisplay: sDisplay = document.getElementById (id).style.display;
Langkah 3
Baris kedua harus mengubah sifat paparan blok teks yang diinginkan ke sebaliknya - sembunyikan jika teks itu dapat dilihat, dan tunjukkan jika ia tersembunyi. Ini boleh dilakukan dengan kod berikut: document.getElementById (id).style.display = sDisplay == 'none'? '': 'tidak ada';
Langkah 4
Tambahkan lembaran gaya berikut ke bahagian tajuk: a {kursor: penunjuk} Anda memerlukan ini untuk memaparkan penunjuk tetikus dengan betul semasa anda mengarahkan kursor ke tag pautan yang tidak lengkap. Dengan bantuan pautan seperti itu, anda mengatur di halaman untuk menukar penglihatan / penglihatan blok teks.
Langkah 5
Letakkan pautan togol ini dalam teks sebelum setiap blok tersembunyi, dan di blok di hujung teks, tambahkan pautan yang serupa. Lampirkan teks yang tidak kelihatan dalam tag span yang tidak dapat dilihat dalam atribut gaya mereka. Contohnya: Luaskan teks +++ Ini adalah teks tersembunyi --- Dalam contoh ini, mengklik pada pautan tiga tambah akan memanggil fungsi di atas pada acara onClick, memberikannya ID blok untuk dilihat. Dan di dalam blok terdapat pautan tiga minus dengan fungsi yang sama - mengkliknya akan menyembunyikan teks.
Langkah 6
Buat bilangan blok teks yang diperlukan, mirip dengan yang dijelaskan pada langkah sebelumnya, ingat untuk mengubah ID dalam atribut id tag span dan dalam pemboleh ubah yang diteruskan ke fungsi oleh peristiwa onClick dalam dua pautan.
