HTML kode for utvidbar liste

Nettsider med begrenset plass på displayet kan fortsatt vise ubegrensede mengder data. Utvid HTML-lister, for eksempel tillate site designere å plassere så mange klikkbare elementer som de liker på en side. Disse listene, da kollapset, bare konsumere en rad på en side, men kan utvides til en hvilken som helst lengde når det åpnes. En rask måte å opprette en utvidbar liste er å bruke en HTML div element som listen container.

div Containere

HTML div tags lage perfekte utvid beholdere fordi de er skalerbar og justere for å holde innholdet. Ved å endre en enkel Cascading Style Sheet attributtverdi, kan du lage en div synes å utvide eller kontrakt avhengig av sin nåværende tilstand. Fargerike, iøynefallende liste design er heller ingen problem fordi CSS lar deg endre en div farger, skrift og legge til en rekke kantlinjer.

Hyperlenker og lister

Når brukerne ser elementer i en liste, de vanligvis forventer at de skal gjøre noe når du klikker. HTML ankerkoder, også kalt koblinger, kan dukke opp hvor som helst på en webside. Ved å plassere dem inne i en div container, kan du bruke ankerkoder som klikkbare elementer. Noen utviklere legge URLer til sine lenker, mens andre gjør koblingene ringe Javascript-funksjoner når den klikkes. Du kan for eksempel lage et listeelement kalle en funksjon som spiller en lyd når den klikkes.

CSS-kode

Når en bruker besøker websiden, skal siden vise en liste i sin sammenlagt tilstand. Sette opp div opprinnelige skjerm attributt til "ingen" skaper den tilstanden. Når du har opprettet en CSS-klasse for div, justere klassens background-color, farge, border-stil og border-color attributter som trengs for å skape den ønskede visuell effekt for listen. Legge til en text-decoration attributt i klassen og sette verdien til "ingen" fjerner understreking fra koblinger og gjør dem ser ut som vanlige listeelementer.

HTML Body Tag

Lag en liste ved å legge en div til dokumentets hoveddel og innebygging ankerkoder inne i div. Hvert anker tekst beskriver elementet. For eksempel, hvis din liste består av fotografiske produkter for salg, kan du legge ankere som tekst verdier er "kameraer", "Lenses" og "Film". Hvis du ønsker for disse koblingene for å åpne nye websider, sette hver kobling href attributt til den aktuelle nettsiden forbundet med elementet. Innstilling av div klasse attributt til navnet på CSS-klasse er beskrevet i forrige avsnitt gjør div vises kollapset når siden først åpnes. Kroppen delen trenger også en knapp eller kobling som kaller Javascript-funksjonen som utvider div.

Javascript-kode

Javascript-funksjonen du oppretter gjør listen og utvide. Når noen klikker på knappen eller koblingen, bruker denne funksjonen document.getElementById funksjonen for å få en henvisning til div som inneholder listen. Funksjonen undersøker deretter div nåværende CSS visningsverdi. Hvis verdien er "ingen" koden setter verdien til "block". Hvis verdien er "block" funksjonen setter den til "none". Denne vippeeffekten fører til at listen for å kollapse og ekspandere som brukere klikker på knappen eller koblingen.