Hvordan lage faner med CSS og JavaScript?

HTML ' faner ” er blokkene som lagrer innholdet på et nettsted i biter. Disse brukes til å vise det lagrede innholdet ved hjelp av flere tilnærminger som museklikk, dobbeltklikk, sveve og mye mer. Faner gir den enkleste måten å navigere gjennom de forskjellige nettsidene på et nettsted. I tillegg bidrar de også til å administrere plassen og gjøre nettsiden mer attraktiv og iøynefallende.

Denne veiledningen vil forklare hvordan du oppretter faner med CSS og JavaScript.

Hvordan lage faner med CSS og JavaScript?

Denne delen utfører trinnvise instruksjoner for å lage faner med CSS og JavaScript.

Trinn 1: Lag fanestruktur ved hjelp av HTML

Se først på HTML-koden som lager HTML-fanestrukturen:

< div id = 'tab1' ved trykk = 'først()' > Hjem div >

< div id = 'tab2' ved trykk = 'sekund();' > Om div >

< div id = 'tab3' ved trykk = 'tredje();' > Kontakt oss div >

< br />

< div id = 'forts. 1' > Velkommen til Linuxhint ! div >

< div id = 'forts. 2' > TEKNOLOGI UTDANNING

Vi har bygget mange produkter for å hjelpe deg å lære om Linux, programmering, informatikk og mer.

div >

< div id = 'forts3' >

Du kan kontakte teamet vårt på redaktør AT linuxhint DOT com.

div >

I kodelinjene ovenfor:

«
'-taggen legger til et div-element med en id 'tab1' og en vedlagt ' ved trykk ' hendelse for å utføre den tilknyttede ' først() ”-funksjonen når den klikkes. Dette elementet fungerer som en HTML-fane.
Metoden ovenfor utføres for de neste to div-elementene.
«
”-taggen legger til et linjeskift.
«
'-taggen setter igjen et div-element som har en tilordnet id 'cont1'. Dette elementet viser innholdet i den opprettede fanen i en blokk.
De to neste'
”-tagger legger også til div-elementer med deres tilordnede IDer.

Trinn 2: Stil faner ved hjelp av CSS

Bruk nå CSS-stilegenskapene for å tilpasse fanene og innholdet i henhold til ditt valg:

< stil >

#tab1, #tab2, #tab3 {

flyte : venstre ;

polstring : 5px 10px 5px 10px ;

bakgrunn : oransje rød ;

farge : #FFFFFF ;

margin : 0px 5px 0px 5px ;

markøren : pekeren ;

grense - radius : 3 px ;

}

#tab1 : hold musepekeren, #tab2 : hold musepekeren, #tab3 : sveve {

bakgrunn : grønn ;

}

#cont1, #cont2, #cont3 {

bredde : 300 piksler ;

høyde : 100 piksler ;

polstring : 40 piksler ;

font - størrelse : medium ;

font - familie : 'Times New Roman' , Times, serif ;

grense : 2px solid oransjerød ;

grense - radius : 7 px ;

vise : ingen ;

}

stil >

I den angitte kodebiten:

For det første får du tilgang til ' faner ” ved å bruke deres tilordnede IDer og tilpasse dem via følgende stilegenskaper (float, padding, background, color, margin: 0px 5px 0px 5px, cursor, and border-radius).
Deretter legger du ved ' sveve ” hendelsesbehandler med fanene for å endre bakgrunnsfargene deres når brukeren holder musen over dem.
Etter det får du tilgang til ' faner innhold ' lagret i div-elementene hvis IDer er 'cont1', 'cont2' og 'cont3'. Bruk nå følgende stilegenskaper (bredde, høyde, utfylling, skriftstørrelse, skriftfamilie, kantlinje, kantradius og visning) på dem.

Trinn 3: Legg til funksjoner til faner ved hjelp av JavaScript

Til slutt, legg til funksjoner til de opprettede fanene ved hjelp av JavaScript:

< manus >

funksjon først ( ) {

dokument. getElementById ( 'forts. 1' ) . stil . vise = 'blokkere' ;

dokument. getElementById ( 'forts. 2' ) . stil . vise = 'ingen' ;

dokument. getElementById ( 'forts.3' ) . stil . vise = 'ingen' ;

}

funksjon nummer to ( ) {

dokument. getElementById ( 'forts. 2' ) . stil . vise = 'blokkere' ;

dokument. getElementById ( 'forts. 1' ) . stil . vise = 'ingen' ;

dokument. getElementById ( 'forts.3' ) . stil . vise = 'ingen' ;

}

funksjon tredje ( ) {

dokument. getElementById ( 'forts.3' ) . stil . vise = 'blokkere' ;

dokument. getElementById ( 'forts. 1' ) . stil . vise = 'ingen' ;

dokument. getElementById ( 'forts. 2' ) . stil . vise = 'ingen'

}

manus >

Kodelinjene ovenfor:

Definer en funksjon kalt ' først '.
I denne funksjonsdefinisjonen er ' document.getElementById() '-metoden får tilgang til div-elementet hvis id er 'cont1' og bruker ' stil ' eiendom med en ' blokkere 'verdi på det. Denne egenskapen vil vise innholdet i fanen som brukeren klikker på.
Deretter får «document.getElementById()» tilgang til en annen div og bruker «style»-egenskapen som har en «none»-verdi for å skjule den. Det vil skjule det elementet på nettsiden.
Metoden ovenfor utføres for de neste åpnede div-elementene. Dette er fordi 'første'-funksjonen bare viser innholdet i fanen hvis 'stil'-egenskapsverdi er 'blokk' og skjuler de andre.
Prosedyren ovenfor utføres for de neste 'second()' og 'third()' funksjonene.

Produksjon

Det kan sees at fanene er opprettet og viser deres respektive innhold ved brukerklikk.

Konklusjon

For å lage faner må du først bygge strukturene deres ved å bruke 'HTML', og deretter tilpasse dem ved hjelp av CSS-stylingegenskaper. Stilegenskapene legges til uten å eksportere noe ekstra stilark. Disse egenskapene gjør fanene attraktive og iøynefallende. Når fanene er opprettet og tilpasset, bruker du programmeringsspråket JavaScript for å legge til funksjonalitet til dem. Denne veiledningen har praktisk talt forklart hele prosedyren for å lage faner med CSS og JavaScript.

Hvordan lage faner med CSS og JavaScript?