Gizli metin blokları yerleştirmek, bir web sitesi sayfasının görsel algısını iyileştirir - gönderilen bilgi miktarından bağımsız olarak, tarayıcıya tam olarak tasarımcının tasarladığı gibi yüklenir. Ek olarak, ziyaretçi için daha uygundur - gerekli bilgi bloğunu ararken, tüm diziye bakmak zorunda değildir, ancak sadece küçük "buzdağlarının ipuçları".
Bu gerekli
Temel HTML ve JavaScript bilgisi
Talimatlar
Aşama 1
Bir HTML sayfasında istenen metin bloklarını gizlemek ve görüntülemek için özel bir JavaScript işlevi kullanın. Tüm bloklar için ortak bir işlev, her birine ayrı ayrı kod eklemekten çok daha uygundur. Sayfanın kaynak kodunun başlık kısmına, açılış ve kapanış komut dosyası etiketlerini yerleştirin ve aralarında bir adla boş bir işlev oluşturun, örneğin takas ve bir gerekli giriş parametresi id: function swap (id) {}
Adım 2
İşlevin gövdesine kaşlı ayraçlar arasına iki satır JavaScript kodu ekleyin. İlk satır, görünürlüğünün açık veya kapalı olmasına bakılmaksızın, metin bloğunun mevcut durumunu okumalıdır. Bir belgede bu tür birkaç blok olabilir, bu nedenle her birinin kendi tanımlayıcısı olmalıdır - tek giriş parametresi olarak id alan onun işlevidir. Bu tanımlayıcıyı kullanarak, sDisplay değişkenine görünürlük / görünmezlik değeri (görüntüleme özelliğinin durumu) atayarak belgede gerekli bloğu arar: sDisplay = document.getElementById (id).style.display;
Aşama 3
İkinci satır, istenen metin bloğunun görüntüleme özelliğini tersine değiştirmelidir - metin görünürse gizle ve gizlenmişse göster. Bu, aşağıdaki kodla yapılabilir: document.getElementById (id).style.display = sDisplay == 'none'? '': 'Yok';
4. Adım
Başlık bölümüne aşağıdaki stil sayfasını ekleyin: a {cursor: pointer} Eksik bir bağlantı etiketinin üzerine geldiğinizde fare işaretçisini doğru şekilde görüntülemek için buna ihtiyacınız olacak. Bu tür bağlantıların yardımıyla, metin bloklarının görünürlüğünü / görünmezliğini değiştirmek için sayfada düzenlersiniz.
Adım 5
Bu geçiş bağlantılarını her gizli bloktan önce metne yerleştirin ve metnin sonundaki bloklara benzer bir bağlantı ekleyin. Görünmez metni, stil özniteliklerinde görünmezlik ayarı olan yayılma etiketleri içine alın. Örneğin: Genişlet metni +++ Bu gizli metindir --- Bu örnekte, üç artı bir bağlantıya tıklamak, onClick olayında yukarıdaki işlevi çağıracak ve görünür hale getirilecek bloğun kimliğini iletecektir. Ve bloğun içinde aynı işlevlere sahip üç eksi bir bağlantı var - üzerine tıklamak metni gizleyecektir.
6. Adım
Span etiketinin id özelliğindeki ve iki bağlantıda onClick olayı tarafından işleve iletilen değişkendeki kimlikleri değiştirmeyi hatırlayarak, önceki adımda açıklanana benzer şekilde gerekli sayıda metin bloğu oluşturun.
