Dynaaminen HTML (DHTML) antaa sinun luoda sovellustyyppisen käyttökokemuksen verkkosivustoihisi, mikä vähentää kokonaisten sivujen lataamisen tiheyttä. Kun napsautat jotain sovelluksessa, sovellus vaihtuu välittömästi näyttämään kyseisen sisällön tai antamaan sinulle vastauksen.
Sitä vastoin verkkosivut on yleensä ladattava uudelleen tai kokonaan uusi sivu on ladattava. Tämä voi tehdä käyttökokemuksesta hajanaisemman. Asiakkaidesi on odotettava ensimmäisen sivun latautumista ja odotettava sitten toisen sivun latautumista tms.
Käyttäminen katsojakokemuksen parantamiseen
DHTML: n käyttäminen on yksi helpoimmista tavoista parantaa tätä kokemusta div elementit vaihtavat päälle ja pois päältä näyttämään sisältöä, kun sitä pyydetään. A div-elementti määrittelee verkkosivusi loogiset jakaumat. Ajattele divia laatikkona, joka voi sisältää kappaleita, otsikoita, linkkejä, kuvia ja jopa muita diveja.
Mitä tarvitset
Jotta voit luoda divin, joka voidaan kytkeä päälle ja pois päältä, tarvitset seuraavaa:
- Linkki div: n ohjaamiseen kytkemällä se päälle ja pois päältä napsautettaessa.
- Div näyttää ja piilottaa.
- CSS muotoilla div piilotettu tai näkyvä.
- JavaScript suorittamaan toiminto.
Ohjauslinkki
Ohjauslinkki on helpoin osa. Luo yksinkertaisesti linkki samalla tavalla kuin toiselle sivulle. Jätä toistaiseksi href-attribuutti tyhjä.
Opi HTML
Sijoita tämä mihin tahansa verkkosivullesi.
Div näyttää ja piilottaa
Luo div-elementti, jonka haluat näyttää ja piilottaa. Varmista, että div: lläsi on yksilöllinen tunnus. Esimerkissä yksilöllinen tunnus on oppia HTML.
Tämä on sisältö-sarake. Se alkaa tyhjästä lukuun ottamatta tätä selitystekstiä. Valitse mitä haluat oppia vasemmasta navigointisarakkeesta. Teksti näkyy alla:
Opi HTML
- Ilmainen HTML-luokka
- HTML-opetusohjelma
- Mikä on XHTML?
CSS näyttää ja piilottaa Div
Luo CSS: lle kaksi luokkaa: yksi piilottaa div ja toinen näyttää sen. Sinulla on kaksi vaihtoehtoa: näyttö ja näkyvyys.
Näyttö poistaa div sivusivulta, ja näkyvyys vain muuttaa sen näkymää. Jotkut koodaajat haluavat näyttö, mutta joskus näkyvyys on järkevää. Esimerkiksi:
.hidden {display: none; }
.hiddenden {display: block; }
Jos haluat käyttää näkyvyyttä, muuta nämä luokat seuraaviksi:
.hidden {visibility: hidden; }
.peittämätön {näkyvyys: näkyvissä; }
Lisää piilotettu luokka diviin, jotta se alkaa piilotettuna sivulla:
JavaScript, jotta se toimisi
Ainoa tämä komentosarja on tarkastella divisi nykyistä luokkaa ja vaihtaa sen piilotetuksi, jos se on merkitty piilotetuksi tai päinvastoin.
Tämä on vain muutama JavaScript-rivi. Aseta seuraava päätäsi HTML-asiakirja (ennen.
Mitä tämä komentosarja tekee, rivi riviltä:
Kutsuu toiminnon Näytäja divID on tarkka yksilöllinen tunnus, jonka haluat näyttää tai piilottaa.
Asettaa muuttujan item kanssa div.
Suorittaa yksinkertaisen selaintarkistuksen. jos selain ei tue getElementById, tämä komentosarja ei toimi.
Tarkistaa luokan div. Jos se on piilotettu, se muuttaa sen muotoon piilotettu. Muuten se muuttaa sen muotoon piilotettu.
Sulkee jos lausunto.
Sulkee toiminnon.
Jotta komentosarja toimisi, sinun on tehtävä vielä yksi asia. Palaa linkkiin ja lisää javascript href-määritteeseen. Muista käyttää tarkkaa yksilöllistä tunnusta, jonka nimitit diville tässä hrefissä:
Opi HTML
Onnittelut! Sinulla on nyt div, joka näkyy ja piilotetaan, kun napsautat linkkiä.
Mahdolliset ongelmat, joita kannattaa varoa
Tämä käsikirjoitus ei ole huijauskestävä. Joissakin tilanteissa se voi aiheuttaa sinulle ongelmia:
JavaScriptiä ei ole kytketty päälle. Jos lukijoillasi ei ole JavaScriptiä tai se on pois päältä, tämä komentosarja ei toimi. Piilotetut div-levyt pysyvät piilossa riippumatta siitä, mitä lukijasi tekevät. Yksi tapa korjata tämä on laittaa piilotetut divit noscript-alueelle, mutta sinun on pelattava sitä saadaksesi heidät näyttämään oikein.
Liian paljon sisältöä. Tämä voi olla loistava työkalu, jonka avulla lukijasi voivat nähdä vain tarvitsemansa sisällön, mutta jos laitat liikaa piilotettujen div-osien sisään, se voi vaikuttaa dramaattisesti sivun latautumiseen. Muista, että vaikka sisältö ei näy, verkkoselain lataa sitä edelleen, joten ole järkevää piilottamasi sisällön suhteen.
Asiakkaat eivät ymmärrä. Asiakkaat eivät ehkä ole tottuneet napsauttamaan linkkiä, joka näyttää tai piilottaa sisältöä. Leikkiä kuvakkeiden (plus-merkit ja nuolet toimivat hyvin) tai tekstin avulla selittääksesi, mitä asiakkaillesi tapahtuu. Toinen ratkaisu on jättää yksi divista auki, kun taas muut ovat kiinni. Tämä voi välittää idean asiakkaillesi, jotta he voivat nopeammin selvittää, miten jäljellä oleva sisältö avataan.
Testaa tällainen dynaaminen HTML aina asiakkaiden kanssa. Kun olet varma, että he voivat ymmärtää ja käyttää sitä, tämä voi olla hyvä tapa saada suuri määrä sisältöä verkkosivuillesi viemättä paljon näkyvää tilaa.