Trinn 1: Sett opp HTML -dokumentet
Det første trinnet er å starte med å lage et HTML -dokument, og inni den HTML -filen, bare ta med en div og en knapp med følgende linjer:
I linjene ovenfor:
På dette tidspunktet oppretter HTML -dokumentet følgende webside på nettleseren:
En div med tekst og en knapp vises på websiden.
Trinn 2: Sett opp CSS -filen eller taggen
Opprett enten en CSS -fil og koble den til HTML -dokumentet eller bruk en <stil> Tag. Div er ennå ikke fremtredende nok. Derfor ville det være flott å legge litt styling til det:
#hidivI linjene ovenfor:
På dette tidspunktet ser HTML -dokumentet slik ut:
For å skjule Div i starten, legg imidlertid en linje til i CSS -filen som er:
Display: Ingen;Hele CSS -delen ville bli:
#hidivNå ser HTML slik ut:
Div vises ikke på HTML -nettsiden i starten.
Trinn 3: Sett opp JavaScript -filen eller taggen
For å legge til funksjonalitet til knappetrykk, kan du bare legge til følgende JavaScript -linjer i HTML -dokumentet ved å bruke en Tag eller en koblet JavaScript -fil:
funksjon Buttonclicked ()I disse linjene:
På dette tidspunktet fungerer HTML -websiden som å følge:
Div vises på knappetrykk og problemet er blitt taklet fullstendig.
Pakk opp
En div kan lett skjules i starten av en webside ved hjelp av vise Eiendom til HTML -elementet, og det kan enkelt vises igjen på knappetrykk med JavaScript. Denne artikkelen har vist trinn-for-trinns prosedyre for å oppnå oppgaven for hånden. Som nevnt i starten av denne artikkelen, er det imidlertid flere tilnærminger til dette problemet, og ingen av dem kan betraktes som den beste løsningen.