Dynamisk HTML (DHTML) giver dig mulighed for at oprette en applikationsstil oplevelse på dine websteder, hvilket reducerer den hyppighed, at hele sider skal indlæses fuldt ud. I applikationer, når du klikker på noget, ændres applikationen straks for at vise det specifikke indhold eller for at give dig dit svar.
I modsætning hertil skal websider typisk genindlæses, eller der skal indlæses en helt ny side. Dette kan gøre brugeroplevelsen mere adskilt. Dine kunder skal vente på, at den første side indlæses, og derefter vente igen på, at den anden side indlæses osv.
Brug til at forbedre seeroplevelsen
Brug af DHTML er en af de nemmeste måder at forbedre denne oplevelse at have div elementer slås til og fra for at vise indhold, når det anmodes om. EN div element definerer logiske opdelinger på din webside. Tænk på en div som en boks, der kan indeholde afsnit, overskrifter, links, billeder og endda andre div.
Hvad du har brug for
For at oprette en div, der kan slås til og fra, har du brug for følgende:
- Et link til at styre div ved at tænde og slukke for det, når der klikkes på det.
- Div at vise og skjule.
- CSS for at style div div skjult eller synlig.
- JavaScript for at udføre handlingen.
Det styrende link
Det styrende link er den nemmeste del. Opret blot et link, som du ville til en anden side. For nu skal du forlade href-attribut blank.
Lær HTML
Placer dette hvor som helst på din webside.
Div at vise og skjule
Opret det div-element, du vil vise og skjule. Sørg for, at din div har et unikt id. I eksemplet er den unikke id lære HTML.
Dette er indholdskolonnen. Det starter tomt bortset fra denne forklaringstekst. Vælg hvad du vil lære i navigationssøjlen til venstre. Teksten vises nedenfor:
Lær HTML
- Gratis HTML-klasse
- HTML-vejledning
- Hvad er XHTML?
CSS til at vise og skjule div
Opret to klasser til din CSS: den ene til at skjule div og den anden for at vise den. Du har to muligheder for dette: skærm og synlighed.
Display fjerner div fra sideflowet, og synligheden ændrer bare, hvordan det ses. Nogle kodere foretrækker det Skærm, men Sommetider sigtbarhed giver også mening. For eksempel:
. skjult {display: none; }
.unhidden {display: block; }
Hvis du vil bruge synlighed, skal du ændre disse klasser til:
. skjult {synlighed: skjult; }
. skjult {synlighed: synlig; }
Føj den skjulte klasse til din div, så den starter som skjult på siden:
JavaScript for at få det til at fungere
Alt dette script gør er at se på det aktuelle klassesæt på din div og skifte det til skjult, hvis det er markeret som skjult eller omvendt.
Dette er kun et par linjer JavaScript. Placer følgende i hovedet på din HTML-dokument (før.
Hvad dette script gør, linje for linje:
Ringer til funktionen skjulog divID er det nøjagtige unikke ID, du vil vise eller skjule.
Indstiller en variabel item med værdien af din div.
Udfører en simpel browserkontrol; hvis browseren ikke understøtter getElementById, dette script fungerer ikke.
Kontrollerer klassen på div. Hvis det er skjult, det ændrer det til skjult. Ellers ændrer det det til skjult.
Lukker hvis udmelding.
Lukker funktionen.
For at få scriptet til at fungere skal du gøre en ting mere. Gå tilbage til dit link, og tilføj javascript til href-attributten. Sørg for at bruge det nøjagtige unikke id, som du navngav din div i dette href:
Lær HTML
Tillykke! Du har nu en div, der vises og skjules, når du klikker på et link.
Mulige problemer at passe på
Dette script er ikke idiotsikkert. Der er nogle situationer, hvor det kan skabe problemer for dig:
JavaScript er ikke slået til. Hvis dine læsere ikke har JavaScript, eller det er slået fra, fungerer dette script ikke. De skjulte divs forbliver skjulte uanset hvad dine læsere gør. En måde at løse dette på er at placere de skjulte divs i et noscript-område, men du bliver nødt til at lege med det for at få dem til at vises korrekt.
For meget indhold. Dette kan være et godt værktøj til at give dine læsere kun mulighed for at se det indhold, de har brug for, men hvis du lægger for meget inde i de skjulte divs, kan det drastisk påvirke, hvordan siden indlæses. Husk, at selvom indholdet ikke vises, downloader webbrowseren det stadig, så brug god mening i, hvor meget indhold du skjuler.
Kunder forstår ikke. Endelig er kunder muligvis ikke vant til at klikke på et link, der viser eller skjuler indhold. Spil rundt med ikoner (plustegn og pile fungerer godt) eller tekst for at forklare, hvad der vil ske med dine kunder. En anden løsning er at lade en af diverne være åbne, mens de andre er lukkede. Dette kan formidle ideen til dine kunder, så de hurtigere kan finde ud af, hvordan de åbner det resterende indhold.
Du bør altid teste Dynamic HTML sådan med dine kunder. Når du først er sikker på, at de kan forstå og bruge det, kan dette være en fantastisk måde at få en stor mængde indhold på dine websider uden at tage meget synligt rum.