CSS ve JavaScript ile Metin veya Resimleri Gösterme ve Gizleme

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:

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 Öğrenin

Bunu 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:

HTML'yi Öğren
  • Ücretsiz HTML Sınıfı
  • HTML Eğitimi
  • XHTML nedir?

    Div'u Gösteren ve Gizleyen CSS

    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:

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

    Görünürlüğü kullanmak istiyorsanız, bu sınıfları şu şekilde değiştirin:

    .hidden {görünürlik: gizli; .unhidden {görünürlik: görünür; }

    Gizli sınıfı, sayfanızda gizlenen şekilde başlayacak şekilde divunuza ekleyin:

    class = "gizli" >

    Çalıştırmak için JavaScript

    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 ( etiketinden önce) yerleştirin: