Dynamisk HTML (DHTML) lar deg lage en applikasjonsstil opplevelse på nettsteder, og reduserer frekvensen at hele sider må lastes fullstendig. Når du klikker på noe i applikasjoner, endres applikasjonen umiddelbart for å vise det spesifikke innholdet eller for å gi deg svaret.
Derimot må websider vanligvis lastes inn på nytt, eller det må lastes inn en helt ny side. Dette kan gjøre brukeropplevelsen mer usammenhengende. Kundene dine må vente på at den første siden skal lastes, og deretter vente igjen på at den andre siden skal lastes inn, og så videre.
Bruker for å forbedre seeropplevelsen
Ved å bruke DHTML er en av de enkleste måtene å forbedre denne opplevelsen å ha div elementer slås av og på for å vise innhold når det blir bedt om det. EN div element definerer logiske inndelinger på websiden din. Tenk på en div som en rute som kan inneholde avsnitt, overskrifter, lenker, bilder og til og med andre div.
Hva du trenger
For å lage en div som kan slås av og på, trenger du følgende:
- En lenke for å kontrollere div ved å slå den på og av når du klikker på den.
- Div å vise og skjule.
- CSS for å style div skjult eller synlig.
- JavaScript for å utføre handlingen.
Den kontrollerende lenken
Den kontrollerende lenken er den enkleste delen. Bare opprett en lenke som du ville gjort til en annen side. For nå, la href attributt blank.
Lær HTML
Plasser dette hvor som helst på websiden din.
Div å vise og skjule
Lag div-elementet du vil vise og skjule. Forsikre deg om at div. Din har en unik id. I eksemplet er den unike iden lære HTML.
Dette er innholdskolonnen. Det starter tomt bortsett fra denne forklaringsteksten. Velg hva du vil lære i navigasjonskolonnen til venstre. Teksten vises nedenfor:
Lær HTML
- Gratis HTML-klasse
- HTML veiledning
- Hva er XHTML?
CSS for å vise og skjule div
Lag to klasser for CSS: en for å skjule div og den andre for å vise den. Du har to alternativer for dette: skjerm og synlighet.
Display fjerner div fra sidestrømmen, og synlighet bare endrer hvordan den blir sett. Noen kodere foretrekker det vise, men noen ganger synlighet gir mening også. For eksempel:
.hidden {display: none; }
.unhidden {display: block; }
Hvis du vil bruke synlighet, kan du endre disse klassene til:
. skjult {synlighet: skjult; }
.unhidden {synlighet: synlig; }
Legg til den skjulte klassen i diven din slik at den starter som skjult på siden:
JavaScript for å få det til å fungere
Alt dette skriptet gjør er å se på gjeldende klasse som er satt på div og bytte det til skjult hvis det er merket som skjult eller omvendt.
Dette er bare noen få linjer med JavaScript. Plasser følgende i hodet på din HTML-dokument (før.
Hva dette skriptet gjør, linje for linje:
Kaller funksjonen vis, og divID er den eksakte unike IDen du vil vise eller skjule.
Setter opp en variabel item med verdien av div.
Utfører en enkel nettleserkontroll; hvis nettleseren ikke støtter getElementById, dette skriptet fungerer ikke.
Sjekker klassen på div. Hvis det er skjult, det endrer det til skjult. Ellers endrer det det til skjult.
Lukker hvis uttalelse.
Stenger funksjonen.
For å få manuset til å fungere, må du gjøre en ting til. Gå tilbake til lenken din og legg til javascriptet til href-attributtet. Sørg for å bruke den nøyaktige unike ID-en som du kalte div i denne href:
Lær HTML
Gratulerer! Du har nå en div som vil vises og skjule når du klikker på en lenke.
Mulige problemer å passe på
Dette manuset er ikke idiotsikkert. Det er noen situasjoner der det kan forårsake problemer for deg:
JavaScript er ikke slått på. Hvis leserne ikke har JavaScript, eller det er slått av, fungerer ikke dette skriptet. De skjulte divene forblir skjulte uansett hva leserne dine gjør. En måte å fikse dette på er å plassere de skjulte divene i et noscript-område, men du må leke med det for å få dem til å vises riktig.
For mye innhold. Dette kan være et flott verktøy for å la leserne bare se innholdet de trenger, men hvis du legger for mye i de skjulte delene, kan det drastisk påvirke hvordan siden lastes inn. Husk at selv om innholdet ikke vises, laster nettleseren fremdeles ned, så bruk god fornuft i hvor mye innhold du skjuler.
Kunder forstår ikke. Til slutt kan det hende at kunder ikke er vant til å klikke på en lenke som viser eller skjuler innhold. Lek deg med ikoner (pluss tegn og piler fungerer bra) eller tekst for å forklare hva som vil skje med kundene dine. En annen løsning er å la en av divene være åpne mens de andre er stengt. Dette kan formidle ideen til kundene dine, slik at de raskere kan finne ut hvordan de kan åpne gjenværende innhold.
Du bør alltid teste Dynamic HTML slik med kundene dine. Når du er trygg på at de kan forstå og bruke det, kan dette være en fin måte å få mye innhold på websidene dine uten å ta opp mye synlig plass.