Slik skjuler og avslører en Div

Ved hjelp av bare Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS), kan du lage intrikate og vakre nettsteder. Når du kombinerer Java med disse to språkene, dette gir deg en enda mer dynamisk nettsted. En enkel måte å legge til interaktivitet til nettstedet ditt er å skape en divisjon (div) som er skjult eller avslørt ved å trykke på en knapp. Dette er nyttig for å skjule store mengder tekst, lage enkle minne spill eller for å skjule bok eller film spoilere.

Bruksanvisning

1 Åpne HTML-redigering programvare. Klikk "Fil" i menylinjen og velg "New" for å opprette et nytt dokument. Hvis du vil redigere en eksisterende HTML-fil, trykk på "File" og velg "Open" for å velge filen du ønsker.

2 Plasser følgende Javascript-koden mellom <head> og </ head> taggene i HTML-dokumentet:

<Script language = "Javascript">

function toggle(id) {

Var state = document.getElementById (id) .style.display;

if (state == 'none') {

document.getElementById (id) .style.display = 'blokk';

} Else {

document.getElementById (id) .style.display = 'none';

}

}

</ Script>

3 Finn <body> og </ body> -kodene i HTML-dokumentet. Mellom disse kodene, plassere følgende kode uansett hvor du ønsker det:

<Div> <a href="#" onclick="toggle('NAME'); tilbake false;"> Vis / skjul </a> </ div>

&lt;div id="NAME">

Innhold

& Lt; / div>

Erstatt "NAVN" med et unikt navn for hver divisjon du ønsker å vise og skjule. Plasser innholdet du ønsker å skjule mellom <div id = "name"> og </ div> tagger. Du kan også endre navnet på koblingen brukeren trykker ved å endre "Show / Hide" tekst. Lagre dokumentet når du er ferdig.