Menempatkan blok teks tersembunyi meningkatkan persepsi visual halaman situs web - ini dimuat ke dalam browser persis seperti yang dirancang oleh perancangnya, terlepas dari jumlah informasi yang diposting. Selain itu, lebih nyaman bagi pengunjung - untuk mencari blok informasi yang diperlukan, ia tidak harus melihat seluruh susunan, tetapi hanya "puncak gunung es" kecil.
Itu perlu
Pengetahuan dasar tentang HTML dan JavaScript
instruksi
Langkah 1
Gunakan fungsi JavaScript khusus untuk menyembunyikan dan menampilkan blok teks yang diinginkan di halaman HTML. Fungsi umum untuk semua blok jauh lebih nyaman daripada menambahkan kode ke masing-masing blok secara terpisah. Di bagian header kode sumber halaman, tempatkan tag skrip pembuka dan penutup, dan di antaranya buat fungsi kosong dengan nama, misalnya, swap dan satu id parameter input yang diperlukan: function swap (id) {}
Langkah 2
Tambahkan dua baris kode JavaScript ke badan fungsi, di antara kurung kurawal. Baris pertama harus membaca status blok teks saat ini - apakah visibilitasnya aktif atau tidak. Mungkin ada beberapa blok seperti itu dalam dokumen, jadi masing-masing harus memiliki pengenalnya sendiri - fungsinyalah yang menerima id sebagai satu-satunya parameter input. Menggunakan pengenal ini, ia mencari blok yang diperlukan dalam dokumen, menetapkan nilai visibilitas / tembus pandang (keadaan properti tampilan) ke variabel sDisplay: sDisplay = document.getElementById (id).style.display;
Langkah 3
Baris kedua harus mengubah properti tampilan dari blok teks yang diinginkan menjadi sebaliknya - sembunyikan jika teks terlihat, dan tampilkan jika tersembunyi. Ini dapat dilakukan dengan kode berikut: document.getElementById (id).style.display = sDisplay == 'none'? '': 'tidak ada';
Langkah 4
Tambahkan stylesheet berikut ke bagian header: a {cursor: pointer} Anda akan membutuhkan ini untuk menampilkan pointer mouse dengan benar saat Anda mengarahkan kursor ke tag link yang tidak lengkap. Dengan bantuan tautan semacam itu, Anda mengatur di halaman untuk mengaktifkan visibilitas / tembus pandang blok teks.
Langkah 5
Tempatkan tautan sakelar ini di teks sebelum setiap blok tersembunyi, dan di blok di akhir teks, tambahkan tautan serupa. Lampirkan teks tak terlihat dalam tag rentang yang memiliki set tak terlihat dalam atribut gayanya. Misalnya: Perluas teks +++ Ini adalah teks tersembunyi --- Dalam contoh ini, mengklik tautan tiga plus akan memanggil fungsi di atas pada acara onClick, meneruskannya ID blok yang akan dibuat terlihat. Dan di dalam blok ada tautan tiga minus dengan fungsi yang sama - mengkliknya akan menyembunyikan teks.
Langkah 6
Buat jumlah blok teks yang diperlukan, mirip dengan yang dijelaskan pada langkah sebelumnya, dengan mengingat untuk mengubah ID di atribut id dari tag span dan dalam variabel yang diteruskan ke fungsi oleh peristiwa onClick di dua tautan.
