Dinaminis HTML (DHTML) leidžia jums sukurti programų stiliaus patirtį savo svetainėse, sumažinant dažnumą, kai visi puslapiai turi būti visiškai įkrauti. Programose, kai ką nors spustelėsite, programa iškart pasikeis, kad būtų rodomas konkretus turinys arba pateiktas jūsų atsakymas.
Priešingai, paprastai reikia iš naujo įkelti tinklalapius arba įkelti visiškai naują puslapį. Tai gali padaryti naudotojo patirtį labiau atskirta. Jūsų klientai turi palaukti, kol bus įkeltas pirmasis puslapis, tada dar kartą palaukti, kol bus įkeltas antrasis puslapis ir t. T.
Naudojimas norint pagerinti žiūrinčiųjų patirtį
Naudojant DHTML yra vienas iš paprasčiausių būdų pagerinti šią patirtį div elementai įjungia ir išjungia rodyti turinį, kai jo prašoma. A div elementas apibrėžia loginius skirstymus jūsų tinklalapyje. Pagalvokite apie div kaip langelį, kuriame gali būti pastraipos, antraštės, nuorodos, vaizdai ir net kiti divai.
Ko jums reikės
Norint sukurti div, kurį galima įjungti ir išjungti, jums reikia:
- Nuoroda, leidžianti valdyti div, jį įjungiant ir išjungiant spustelėjus.
- Div parodyti ir paslėpti.
- CSS stiliaus div paslėpta arba matoma.
- „JavaScript“, kad atliktumėte veiksmą.
Kontrolinė nuoroda
Kontroliuojanti grandis yra lengviausia dalis. Tiesiog sukurkite nuorodą kaip ir į kitą puslapį. Kol kas palikite href atributas tuščias.
Sužinokite HTML
Įdėkite tai bet kur savo tinklalapyje.
„Div“ parodyti ir paslėpti
Sukurkite elementą div, kurį norite parodyti ir paslėpti. Įsitikinkite, kad jūsų div yra unikalus ID. Pavyzdyje unikalus ID yra išmokti HTML.
Tai yra turinio stulpelis. Jis prasideda tuščias, išskyrus šį paaiškinimo tekstą. Kairėje esančiame naršymo stulpelyje pasirinkite, ko norite išmokti. Tekstas pasirodys žemiau:
Sužinokite HTML
- Nemokama HTML klasė
- HTML pamoka
- Kas yra XHTML?
CSS parodyti ir paslėpti div
Sukurkite dvi klases savo CSS: viena paslėpti div ir kita ją parodyti. Tam turite dvi galimybes: rodymas ir matomumas.
Ekranas pašalina div iš puslapio srauto, o matomumas tiesiog pakeičia jo matymą. Kai kurie koduotojai teikia pirmenybę ekranas, bet kartais matomumas turi prasmę. Pavyzdžiui:
.paslėpta {rodyti: nėra; }
.nhiddenden {display: block; }
Jei norite naudoti matomumą, pakeiskite šias klases į:
.paslėpta {matomumas: paslėpta; }
.neslėpta {matomumas: matoma; }
Pridėkite paslėptą klasę prie savo div, kad ji prasidėtų kaip paslėpta puslapyje:
„JavaScript“, kad jis veiktų
Viskas, ką šis scenarijus daro, yra pažvelgti į dabartinę „div“ klasę ir perjungti ją į neslėptą, jei ji pažymėta kaip paslėpta, arba atvirkščiai.
Tai tik kelios „JavaScript“ eilutės. Į galvą įdėkite šiuos dalykus HTML dokumentas (prieš.
Ką šis scenarijus daro, eilutė po eilutės:
Iškviečia funkciją nebeslėptiir divID yra tikslus unikalus ID, kurį norite parodyti ar slėpti.
Nustatomas kintamasis item su jūsų div verte.
Atlieka paprastą naršyklės patikrinimą; jei naršyklė nepalaiko „getElementById“, šis scenarijus neveiks.
Tikrina klasę div. Jei taip paslėpta, tai pakeičia į neslėpta. Priešingu atveju jis pakeičia jį į paslėpta.
Uždaro jei pareiškimas.
Uždaro funkciją.
Kad scenarijus veiktų, reikia padaryti dar vieną dalyką. Grįžkite prie savo nuorodos ir pridėkite javascript prie atributo href. Būtinai naudokite tikslų unikalų ID, kurį pavadinote savo divu šiame hrefe:
Sužinokite HTML
Sveikiname! Dabar turite divą, kuris bus rodomas ir paslėptas, kai spustelėsite nuorodą.
Galimos problemos, į kurias reikia atkreipti dėmesį
Šis scenarijus nėra apgaulingas. Yra keletas situacijų, kai tai gali sukelti problemų:
„JavaScript“ neįjungta. Jei jūsų skaitytojai neturi „JavaScript“ arba jis išjungtas, šis scenarijus neveiks. Paslėpti divai lieka paslėpti, kad ir ką darytų jūsų skaitytojai. Vienas iš būdų tai išspręsti yra paslėptų divų įdėjimas į „noscript“ sritį, tačiau jūs turėsite su tuo žaisti, kad jie būtų rodomi teisingai.
Per daug turinio. Tai gali būti puikus įrankis, leidžiantis skaitytojams matyti tik jiems reikalingą turinį, tačiau jei per daug įdėsite į paslėptus skyrius, tai gali smarkiai paveikti puslapio įkelimą. Atminkite, kad nors turinys nerodomas, žiniatinklio naršyklė vis tiek jį atsisiunčia, todėl naudokitės protu, kiek turinio slepiate.
Klientai nesupranta. Galiausiai klientai negali būti įpratę spustelėti nuorodą, kurioje rodomas ar slepiamas turinys. Žaiskite naudodami piktogramas (pliuso ženklai ir rodyklės gerai veikia) arba tekstą, kad paaiškintumėte, kas nutiks jūsų klientams. Kitas sprendimas yra palikti vieną iš divų atvirą, o kiti uždaryti. Tai gali perduoti idėją jūsų klientams, kad jie galėtų greičiau suprasti, kaip atidaryti likusį turinį.
Visada turėtumėte išbandyti tokį dinaminį HTML su klientais. Kai jaučiatės tikri, kad jie gali tai suprasti ir naudoti, tai gali būti puikus būdas gauti daug turinio savo tinklalapiuose, neužimant daug matomos vietos.