Tunjukkan dan Sembunyikan Teks atau Imej Dengan CSS dan JavaScript

Buat pengalaman gaya aplikasi di tapak web anda

Dinamik HTML (DHTML) membolehkan anda membuat pengalaman gaya aplikasinya di laman web anda, mengurangkan kekerapan bahawa keseluruhan halaman harus dimuatkan sepenuhnya. Dalam aplikasi, apabila anda mengklik pada sesuatu, permohonan itu segera berubah untuk menunjukkan kandungan tertentu atau memberi anda jawapan anda.

Sebaliknya, halaman web biasanya perlu dimuat semula, atau seluruh halaman baru harus dimuatkan. Ini boleh menjadikan pengalaman pengguna lebih teratur. Pelanggan anda perlu menunggu halaman pertama dimuatkan dan kemudian tunggu lagi untuk memuat halaman kedua, dan sebagainya.

Menggunakan & lt; div & gt; untuk Meningkatkan Pengalaman Penonton

Menggunakan DHTML, salah satu cara yang paling mudah untuk meningkatkan pengalaman ini adalah untuk mempunyai elemen div beralih dan dimatikan untuk memaparkan kandungan apabila diminta. Satu elemen div mentakrifkan bahagian logik pada halaman web anda. Fikirkan div sebagai kotak yang mungkin mengandungi perenggan, tajuk, pautan, imej, dan bahkan div lain.

Apa Yang Anda Perlu

Untuk membuat div yang boleh ditanggalkan dan dimatikan, anda memerlukan yang berikut:

Pautan Mengawal

Pautan mengawal adalah bahagian yang paling mudah. Cukup buat pautan seperti yang anda mahu ke laman lain. Buat masa ini, tinggalkan atribut href kosong.

Belajar HTML

Letakkan ini di mana sahaja di halaman web anda.

The Div to Show and Hide

Buat elemen div yang anda mahu tunjukkan dan sembunyikan. Pastikan div anda mempunyai id yang unik di atasnya. Dalam contoh, id yang unik adalah mempelajari HTML .

Ini adalah lajur kandungan. Ia dimulakan kosong kecuali untuk teks penjelasan ini. Pilih perkara yang ingin anda pelajari dalam lajur navigasi di sebelah kiri. Teks akan muncul di bawah:

Ketahui HTML
  • Kelas HTML Percuma
  • Tutorial HTML
  • Apa itu XHTML?

    CSS untuk Menunjukkan dan Sembunyikan Div

    Buat dua kelas untuk CSS anda: satu untuk menyembunyikan div dan yang lain untuk menunjukkannya. Anda mempunyai dua pilihan untuk ini: paparan dan penglihatan.

    Paparan memindahkan div dari aliran halaman, dan penglihatan hanya mengubah bagaimana ia dilihat. Sesetengah coder lebih suka paparan , tetapi kadang-kadang keterlihatan masuk akal juga. Sebagai contoh:

    .hidden {display: none; } .unhidden {display: block; }

    Jika anda ingin menggunakan keterlihatan, kemudian ubah kelas ini kepada:

    .hidden {visibility: hidden; } .unhidden {penglihatan: kelihatan; }

    Tambah kelas tersembunyi ke div anda supaya ia bermula seperti yang tersembunyi pada halaman:

    class = "hidden" >

    JavaScript untuk menjadikannya berfungsi

    Semua skrip ini tidak melihat kelas semasa yang ditetapkan di div anda dan bertukar kepada unhidden jika ditandai sebagai tersembunyi atau sebaliknya.

    Ini hanya beberapa baris JavaScript. Letakkan yang berikut di kepala dokumen HTML anda (sebelum tag :