Buat pengalaman bergaya aplikasi di situs web Anda
Dynamic HTML (DHTML) memungkinkan Anda untuk membuat pengalaman bergaya aplikasi di situs web Anda, mengurangi frekuensi seluruh halaman harus dimuat sepenuhnya. Dalam aplikasi, ketika Anda mengklik sesuatu, aplikasi segera berubah untuk menunjukkan konten spesifik itu atau memberikan jawaban Anda.
Sebaliknya, laman web biasanya harus dimuat ulang, atau seluruh laman baru harus dimuat. Ini dapat membuat pengalaman pengguna lebih terputus-putus. Pelanggan Anda harus menunggu halaman pertama dimuat dan kemudian menunggu lagi untuk memuat halaman kedua, dan seterusnya.
Menggunakan & lt; div & gt; untuk Meningkatkan Pengalaman Penonton
Menggunakan DHTML, salah satu cara termudah untuk meningkatkan pengalaman ini adalah mengaktifkan dan menonaktifkan elemen div untuk menampilkan konten ketika diminta. Elemen div mendefinisikan pembagian logis di halaman web Anda. Pikirkan div sebagai kotak yang mungkin berisi paragraf, judul, tautan, gambar, dan bahkan div lain.
Apa yang Anda Butuhkan
Untuk membuat div yang dapat diaktifkan dan dinonaktifkan, Anda memerlukan hal berikut:
- Tautan untuk mengontrol div dengan mengaktifkan dan menonaktifkannya saat diklik
- Div untuk ditampilkan dan disembunyikan
- CSS untuk mengatur gaya div yang tersembunyi atau terlihat
- JavaScript untuk melakukan aksinya
The Controlling Link
Tautan pengendali adalah bagian termudah. Cukup buat tautan seperti yang Anda lakukan ke halaman lain. Untuk saat ini, biarkan atribut href kosong.
Pelajari HTMLTempatkan ini di mana saja di halaman web Anda.
The Div to Show and Hide
Buat elemen div yang ingin Anda tampilkan dan sembunyikan. Pastikan bahwa div Anda memiliki id unik di atasnya. Dalam contoh, id unik adalah belajar HTML .
Ini adalah kolom konten. Ini mulai kosong kecuali untuk teks penjelasan ini. Pilih apa yang ingin Anda pelajari di kolom navigasi di sebelah kiri. Teks akan muncul di bawah ini: Buat dua kelas untuk CSS Anda: satu untuk menyembunyikan div dan yang lainnya untuk menampilkannya. Anda memiliki dua opsi untuk ini: tampilan dan visibilitas. Tampilan menghapus div dari aliran halaman, dan visibilitas hanya mengubah tampilannya. Beberapa coders lebih menyukai tampilan , tetapi terkadang visibilitas juga masuk akal. Sebagai contoh: Jika Anda ingin menggunakan visibilitas, maka ubah kelas-kelas ini menjadi: Tambahkan kelas tersembunyi ke div Anda sehingga dimulai sebagai tersembunyi di halaman: Semua skrip ini adalah melihat kelas saat ini yang ditetapkan pada div Anda dan mengaktifkannya ke unhidden jika ditandai sebagai tersembunyi atau sebaliknya. Ini hanya beberapa baris JavaScript. Tempatkan yang berikut di kepala dokumen HTML Anda (sebelum tag Pelajari HTML
CSS untuk Menampilkan dan Menyembunyikan Div
JavaScript untuk Melakukannya