Piilotettujen tekstilohkojen sijoittaminen parantaa verkkosivun visuaalista käsitystä - se ladataan selaimeen täsmälleen samalla tavalla kuin suunnittelija on suunnitellut sen, riippumatta lähetetyn tiedon määrästä. Lisäksi se on helpompaa vierailijalle - etsimään tarvittavaa tietolohkoa hänen ei tarvitse etsiä koko joukkoa, vaan vain pieniä "jäävuorien kärkiä".
Se on välttämätöntä
Perustiedot HTML: stä ja JavaScriptistä
Ohjeet
Vaihe 1
Käytä mukautettua JavaScript-toimintoa piilottaaksesi ja näyttääksesi haluamasi tekstilohkot HTML-sivulla. Kaikkien lohkojen yhteinen toiminto on paljon helpompaa kuin koodin lisääminen kuhunkin niistä erikseen. Aseta sivun lähdekoodin otsikko-osaan aloitus- ja lopetuskooditunnisteet ja luo niiden väliin tyhjä funktio, jolla on nimi, esimerkiksi swap ja yksi vaadittu syöttöparametrin tunnus: function swap (id) {}
Vaihe 2
Lisää kaksi riviä JavaScript-koodia funktion runkoon kiharoiden aaltosulkeiden väliin. Ensimmäisen rivin tulisi lukea tekstilohkon nykyinen tila - riippumatta siitä, onko sen näkyvyys päällä vai ei. Asiakirjassa voi olla useita tällaisia lohkoja, joten jokaisella on oltava oma tunniste - hänen funktionsa saa id: n ainoana syöttöparametrina. Tämän tunnisteen avulla se etsii tarvittavan lohkon asiakirjasta ja määrittää näkyvyys / näkymättömyysarvon (näyttöominaisuuden tila) sDisplay-muuttujalle: sDisplay = document.getElementById (id).style.display;
Vaihe 3
Toisen rivin tulisi muuttaa halutun tekstilohkon näyttöominaisuus vastakkaiseen - piilota, jos teksti on näkyvissä, ja näyttää, onko se piilotettu. Tämä voidaan tehdä seuraavalla koodilla: document.getElementById (id).style.display = sDisplay == 'ei mitään'? '': 'ei mitään';
Vaihe 4
Lisää seuraava tyylitaulukko otsikkoon: a {cursor: pointer} Tätä tarvitset, jotta hiiren osoitin näytetään oikein, kun viet hiiren keskeneräisen linkkitunnisteen päälle. Tällaisten linkkien avulla järjestät sivulla vaihtamalla tekstilohkojen näkyvyyden / näkymättömyyden.
Vaihe 5
Sijoita nämä vaihtolinkit tekstiin ennen jokaista piilotettua lohkoa ja lisää samanlainen linkki tekstin lopussa oleviin lohkoihin. Sijoita näkymätön teksti span-tunnisteisiin, joiden tyylimääritteissä on näkymättömyys. Esimerkiksi: Laajenna teksti +++ Tämä on piilotettu teksti --- Tässä esimerkissä kolmen plus-linkin napsauttaminen kutsuu yllä olevaa toimintoa onClick-tapahtumaan ja välittää sille näkyvän lohkon tunnuksen. Ja lohkon sisällä on linkki kolmesta miinuksesta, joilla on samat toiminnot - sen napsauttaminen piilottaa tekstin.
Vaihe 6
Luo tarvittava määrä tekstilohkoja, samanlainen kuin edellisessä vaiheessa, muista muistaa vaihtaa tunnukset span-tagin id-määritteessä ja muuttujassa, jonka onClick-tapahtuma välitti funktiolle kahdessa linkissä.
