Hvordan å utvide en del i Javascript

February 6

Ankerkoder, kan Javascript og CSS hjelpe deg legge til profesjonelt utseende ekspanderende seksjoner til websidene. Du har kanskje sett denne effekten mens du klikker på en knapp eller lenke på en nettside. Ved å klikke på en forlengbar seksjon fører det til å vise ekstra innhold. Lære å lage denne effekten gir deg muligheten til å plassere store mengder innhold i en liten mengde av webhotell.

Bruksanvisning

1 Opprett en ny HTML-dokument med Notepad eller HTML-editor.

2 Lim inn følgende kode i dokumentet "<body>" -delen:

<Div>

<a href="#" onclick="return manageSection('section1')"> Seksjon Overskrift 1 </a>

Utvidede innholdet i § 1

</ Div>

Denne HTML kode oppretter en ankertekstlinje som leser, "Seksjon Overskrift 1." Den har en onclick hendelse som kaller en Javascript-funksjon som heter "manageSection" når den klikkes. Legg merke til "div" tag nedenfor som kapitteloverskriften. Det refererer til en CSS-klasse som heter "kollapset". At klassen holder div og innholdet skjult inntil Java gjør dette innholdet synlig. Legg merke til at kallet til "manageSection" Javascript-funksjonen passerer id av kollapset div. Det id er "section1." Funksjonen må denne verdien til å bestemme hvilke div å utvide.

3 Lim inn følgende kode etter koden beskrevet i forrige trinn:

<Div>

<a href="#" onclick="return manageSection('section2')"> Seksjon Overskrift 2 </a>

Utvidede innholdet i § 2

</ Div>

Dette skaper en annen ankertekstlinje som leser, "Seksjon Overskrift 2." Onclick hendelsen krever samme Javascript-funksjonen og passerer "§ 2" til funksjonen.

4 Finn dokumentets <head> -delen, og legge til følgende CSS-koden til den delen:

.expanded {display: block;}

.collapsed {display: none;}

</ Style>

Dette skaper "utvidet" -klassen som gjør et element synlig og "kollapset" -klassen som skjuler det.

5 Lim inn følgende Javascript-koden etter at CSS-koden vist i forrige trinn:

funksjon manageSection (sectionID) {

Var section = document.getElementById (sectionID);

if (section.className == "kollapset")

section.className = "expanded";

ellers

section.className = "kollapset";

return true;

}

Denne koden kjøres når brukerne klikker på en av de seksjons overskrifter på websiden. Hver gang en bruker klikker en overskrift, slår denne koden den skjulte div CSS class mellom "utvidet" og "kollapset". Dette gir en illusjon av at delene er åpne og lukke.

6 Lagre HTML-dokumentet og åpne den i en nettleser. Nettleseren viser to synlige avsnittsoverskrifter som heter "Seksjon Overskrift 1" og "Seksjon Overskrift 2."

7 Klikk på disse posisjoner. Nettleseren utvider dem til å avsløre den ekstra innhold i seksjonene. Klikk delene igjen for å kollapse dem.

Hint

De to skjulte divs i dette eksemplet inneholder teksten "Utvidede innholdet i § 1" og "Utvidede innholdet i § 2." Du kan erstatte teksten med noen HTML-elementer du liker. For eksempel, hvis du ønsker å utvide og skjule et bildegalleri, tabeller eller til og med en video, plassere dem i de skjulte div deler. Nettlesere viser hva du legger i disse delene når brukere utvide dem.