Vis og skjul tekst eller bilder med CSS og JavaScript

Lag en opplevelse i applikasjonsstil på nettstedene dine

InnholdsfortegnelseUtvide

• Forbedre seeropplevelsen
• Hva du trenger
• Kontrollerende kobling
• Div for å vise og skjule
• CSS for å vise og skjule Div
• JavaScript for å få det til å fungere
• Mulige problemer

Dynamisk HTML (DHTML) lar deg lage en opplevelse i applikasjonsstil på nettstedene dine, noe som reduserer frekvensen som hele sider må lastes helt inn. I applikasjoner, når du klikker på noe, endres applikasjonen umiddelbart for å vise det spesifikke innholdet eller for å gi deg svaret ditt.

Derimot må nettsider vanligvis lastes inn på nytt, eller en helt ny side må lastes inn. Dette kan gjøre brukeropplevelsen mer usammenhengende. Kundene dine må vente på at den første siden lastes inn og deretter vente igjen på at den andre siden skal lastes, og så videre.

Chris Schmidt / E+ / Getty Images

Brukes for å forbedre seeropplevelsen

Ved å bruke DHTML er en av de enkleste måtene å forbedre denne opplevelsen på div elementer slås av og på for å vise innhold når det blir bedt om det. EN div element definerer logiske inndelinger på nettsiden din. Tenk på en div som en boks som kan inneholde avsnitt, overskrifter, lenker, bilder og til og med andre div.

Hva du trenger

For å lage en div som kan slås på og av, trenger du følgende:

• En lenke for å kontrollere div ved å slå den av og på når du klikker.
• Div for å 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 lag en lenke som du ville til en annen side. For nå, la href-attributt blank.

|_+_|

Plasser dette hvor som helst på nettsiden din.

Div for å vise og skjule

Lag div-elementet du vil vise og skjule. Sørg for at din div har en unik id. I eksemplet er den unike IDen lære HTML .

|_+_|

Dette er innholdskolonnen. Den starter tom bortsett fra denne forklaringsteksten. Velg hva du vil lære i navigasjonskolonnen til venstre. Teksten vil vises nedenfor:

Lær HTML

• Gratis HTML-klasse
• HTML opplæring
• Hva er XHTML?

CSS for å vise og skjule Div

Lag to klasser for din CSS: en for å skjule div-en og den andre for å vise den. Du har to alternativer for dette: visning og synlighet.

Display fjerner div fra sideflyten, og synlighet endrer bare hvordan den ses. Noen kodere foretrekker vise , men noen ganger synlighet gir mening også. For eksempel:

|_+_|

Hvis du vil bruke synlighet, endrer du disse klassene til:

|_+_|

Legg til den skjulte klassen til din div slik at den starter som skjult på siden:

|_+_|

JavaScript for å få det til å fungere

Alt dette skriptet gjør er å se på gjeldende klassesett på div-en din og veksle det til uskjult 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:

1. Kaller opp funksjonen vise frem , og dele opp er den eksakte unike ID-en du vil vise eller skjule.

2. Setter opp en variabel i har med verdien av div.

3. Utfører en enkel nettlesersjekk; hvis nettleseren ikke støtter getElementById , dette skriptet vil ikke fungere.

4. Sjekker klassen på div. Hvis det er skjult , endrer det det til ugjemt . Ellers endres det til skjult .

5. Lukker hvis uttalelse.

6. Lukker funksjonen.

For å få skriptet til å fungere, må du gjøre en ting til. Gå tilbake til lenken din og legg javascriptet til href-attributtet. Sørg for å bruke den eksakte unike ID-en som du kalte div-en din i denne href:

|_+_|

Gratulerer! Du har nå en div som vil vise og skjule hver gang du klikker på en lenke.

Mulige problemer å se opp for

Dette skriptet er ikke idiotsikkert. Det er noen situasjoner der det kan forårsake problemer for deg:

1. JavaScript er ikke slått på. Hvis leserne dine ikke har JavaScript eller det er slått av, vil ikke dette skriptet fungere. De skjulte divene forblir skjult 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.

2. 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 divene, kan det drastisk påvirke hvordan siden lastes. Husk at selv om innholdet ikke vises, laster nettleseren det ned, så bruk god fornuft i hvor mye innhold du skjuler.

3. 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 med ikoner (plusstegn og piler fungerer bra) eller tekst for å forklare hva som vil skje med kundene dine. En annen løsning er å la en av divene stå åpen mens de andre er lukket. Dette kan formidle ideen til kundene dine, slik at de raskere kan finne ut hvordan de skal åpne det gjenværende innholdet.

Du bør alltid teste dynamisk HTML som dette med kundene dine. Når du føler deg trygg på at de kan forstå og bruke det, kan dette være en fin måte å få en stor mengde innhold på nettsidene dine uten å ta opp mye synlig plass.