Hvordan skjule Div Element som standard og vise det på klikk ved å bruke JavaScript og Bootstrap?

Å skjule elementer på en HTML -webside og vise dem på en viss knappetrykk er ganske enkelt ved hjelp av CSS, Bootstrap og JavaScript. Det er flere tilnærminger til dette problemet. Ingen av dem kan imidlertid betraktes som optimal eller den "beste" løsningen. Denne artikkelen vil ta tilnærmingen til å sette Div's Display -egenskapen til ingen i starten og endre den ved hjelp av JavaScript.

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:

Dette er Div
Klikk for å vise

I linjene ovenfor:

• EN opprettes med en spesifikk ID som er “Hidediv”
• En knapp opprettes med Tag, med en OnClick -eiendom satt til lik knappklikket () Funksjon fra skriptfilen

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:

#hidiv
Bakgrunnsfarge: Yellowgreen;
Høyde: 150px;
Bredde: 150px;

I linjene ovenfor:

• Div refereres til ved å bruke IDen sin som "Hidediv ”
• En høyde og en bredde er spesifisert for DIV
• En bakgrunnsfarge er gitt til Div

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:

#hidiv
Display: Ingen;
Bakgrunnsfarge: Yellowgreen;
Høyde: 150px;
Bredde: 150px;

Nå 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 ()
$ ("#Hidediv").forestilling();

I disse linjene:

• En funksjonsknappklikket () opprettes som vil bli kalt på klikket på knappen på grunn av ved trykk() Eiendom definert inne i stikkord
• Div er referert til av sin ID som er “Hidediv”
• Show () -metoden kalles på Div som muliggjør dens vise eiendom

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.