Web sitelerinizde uygulama stili bir deneyim yaratın
Dinamik HTML (DHTML), web sitelerinizde uygulama stili bir deneyim oluşturmanıza ve tüm sayfaların tam olarak yüklenmesi gereken sıklığı azaltmanıza olanak tanır. Uygulamalarda, bir şey üzerine tıkladığınızda, uygulama belirli içeriği göstermek veya cevabınızı size vermek için hemen değişir.
Buna karşılık, web sayfalarının genellikle yeniden yüklenmesi veya yeni bir sayfanın yüklenmesi gerekir. Bu, kullanıcı deneyimini daha fazla ayrılabilir hale getirebilir. Müşterilerinizin ilk sayfanın yüklenmesini beklemesi ve ikinci sayfanın yüklenmesini beklemeniz gerekir.
& Lt; div & gt; Görüntüleyici Deneyimini Artırmak İçin
DHTML'yi kullanarak, bu deneyimi geliştirmenin en kolay yollarından biri, istenildiğinde içeriği görüntülemek için div öğelerinin açılıp kapanmasıdır. Bir div öğesi, web sayfanızdaki mantıksal bölümleri tanımlar. Paragrafları, başlıkları, linkleri, resimleri ve hatta diğer divları içerebilen bir kutu olarak düşünün.
Ne İhtiyacınız Var
Açılıp kapanabilen bir div oluşturmak için aşağıdakilere ihtiyacınız vardır:
- Tıklandığında, dönüşü açıp kapatarak div kontrol etmek için bir bağlantı
- Gösterilecek ve gizlenecek div
- CSS, gizli veya görünür olan bir bölüme stil vermek
- Eylemi gerçekleştirmek için JavaScript
Kontrol Bağlantısı
Kontrol bağlantısı en kolay kısımdır. Sadece başka bir sayfaya yapacağınız gibi bir bağlantı oluşturun. Şimdilik, href özniteliğini boş bırakın.
HTML ÖğreninBunu web sayfanıza yerleştirin.
Göstermek ve Gizlemek için Div
Göstermek ve gizlemek istediğiniz div öğesini oluşturun. Divinizin üzerinde benzersiz bir kimlik olduğundan emin olun. Örnekte, benzersiz kimlik HTML'yi öğreniyor .
Bu, içerik sütundur. Bu açıklama metni dışında boş başlıyor. Soldaki gezinme sütununda öğrenmek istediğiniz şeyi seçin. Metin aşağıda görünecektir: p> CSS'niz için iki sınıf oluşturun: biri div'i ve diğerini göstermek için gizleyin. Bunun için iki seçeneğiniz var: görüntü ve görünürlük. Ekran, div'i sayfa akışından kaldırır ve görünürlük sadece göründüğünü değiştirir. Bazı kodlayıcılar görüntülemeyi tercih eder, ancak bazen görünürlük de mantıklıdır. Örneğin: Görünürlüğü kullanmak istiyorsanız, bu sınıfları şu şekilde değiştirin: Gizli sınıfı, sayfanızda gizlenen şekilde başlayacak şekilde divunuza ekleyin: Tüm bu betikler, divunuzdaki geçerli sınıfa bakar ve gizli veya tam tersi olarak işaretlenirse gizlenmez. Bu sadece birkaç satırlık JavaScript’tir. Aşağıdakileri, HTML belgenizin başına ( HTML'yi Öğren h3>
Div'u Gösteren ve Gizleyen CSS
Çalıştırmak için JavaScript