Hoe maak je tabbladen met CSS en JavaScript?

HTML “ tabbladen 'zijn de blokken die de inhoud van een website in stukjes opslaan. Deze worden gebruikt om de opgeslagen inhoud weer te geven met behulp van meerdere benaderingen, zoals muisklikken, dubbelklikken, zweven en nog veel meer. Tabbladen bieden de eenvoudigste manier om door de verschillende webpagina's van een website te navigeren. Daarnaast helpen ze ook om de ruimte te beheren en de website aantrekkelijker en opvallender te maken.

In deze handleiding wordt uitgelegd hoe u tabbladen maakt met CSS en JavaScript.

Hoe maak je tabbladen met CSS en JavaScript?

In deze sectie worden stapsgewijze instructies gegeven voor het maken van tabbladen met CSS en JavaScript.

Stap 1: Maak een tabbladstructuur met HTML

Kijk eerst naar de HTML-code die de HTML-tabbladenstructuur creëert:

< div id = 'tab1' bij klikken = 'Eerst()' > Thuis div >

< div id = 'tab2' bij klikken = 'seconde();' > Over div >

< div id = 'tab3' bij klikken = 'derde();' > Neem contact met ons op div >

< br />

< div id = 'vervolg1' > Welkom bij Linuxhint ! div >

< div id = 'vervolg2' > TECHNOLOGIE-ONDERWIJS

We hebben veel producten gebouwd om u te helpen meer te leren over Linux, programmeren, informatica en meer.

div >

< div id = 'vervolg3' >

U kunt contact opnemen met ons team via redacteur AT linuxhint DOT com.

div >

In de bovenstaande coderegels:

De '
”-tag voegt een div-element toe met de id “tab1” en een bijgevoegde “ bij klikken ” gebeurtenis om de gekoppelde “ Eerst() ”-functie wanneer erop wordt geklikt. Dit element fungeert als een HTML-tabblad.
De bovenstaande methode wordt uitgevoerd voor de volgende twee div-elementen.
De '
”-tag voegt een regeleinde toe.
De '
”-tag voegt opnieuw een div-element in met de toegewezen id “cont1”. Dit element toont de inhoud van het aangemaakte tabblad in een blok.
De volgende twee “
'-tags voegen ook div-elementen toe met hun toegewezen ID's.

Stap 2: Stijltabbladen met CSS

Pas nu de CSS-stijleigenschappen toe om de tabbladen en hun inhoud aan te passen aan uw keuze:

< stijl >

#tab1, #tab2, #tab3 {

vlot : links ;

opvulling : 5px 10px 5px 10px ;

achtergrond : Oranje rood ;

kleur : #FFFFFF ;

marge : 0px 5px 0px 5px ;

cursor : wijzer ;

grens - straal : 3px ;

}

#tab1 : zweven, #tab2 : zweven, #tab3 : zweven {

achtergrond : groente ;

}

#cont1, #cont2, #cont3 {

breedte : 300px ;

hoogte : 100px ;

opvulling : 40px ;

lettertype - maat : medium ;

lettertype - familie : 'Times New Roman' , Tijden, schreef ;

grens : 2px effen oranjerood ;

grens - straal : 7px ;

weergave : geen ;

}

stijl >

In het genoemde codefragment:

Ga eerst naar de “ tabbladen ' met behulp van hun toegewezen ID's en pas ze aan via de volgende stijleigenschappen (zwevend, opvulling, achtergrond, kleur, marge: 0px 5px 0px 5px, cursor en randradius).
Voeg vervolgens de “ zweven ”gebeurtenishandler met de tabbladen om hun achtergrondkleuren te wijzigen wanneer de muis van de gebruiker erover beweegt.
Ga daarna naar de “ tabbladen inhoud ” opgeslagen in de div-elementen waarvan de ID’s “cont1”, “cont2” en “cont3” zijn. Pas nu de volgende stijleigenschappen (breedte, hoogte, opvulling, lettergrootte, lettertypefamilie, rand, randradius en weergave) erop toe.

Stap 3: Voeg functionaliteiten toe aan tabbladen met behulp van JavaScript

Voeg ten slotte functionaliteiten toe aan de aangemaakte tabbladen met behulp van JavaScript:

< script >

eerst functioneren ( ) {

document. getElementById ( 'vervolg1' ) . stijl . weergave = 'blok' ;

document. getElementById ( 'vervolg2' ) . stijl . weergave = 'geen' ;

document. getElementById ( 'vervolg3' ) . stijl . weergave = 'geen' ;

}

functie tweede ( ) {

document. getElementById ( 'vervolg2' ) . stijl . weergave = 'blok' ;

document. getElementById ( 'vervolg1' ) . stijl . weergave = 'geen' ;

document. getElementById ( 'vervolg3' ) . stijl . weergave = 'geen' ;

}

functie derde ( ) {

document. getElementById ( 'vervolg3' ) . stijl . weergave = 'blok' ;

document. getElementById ( 'vervolg1' ) . stijl . weergave = 'geen' ;

document. getElementById ( 'vervolg2' ) . stijl . weergave = 'geen'

}

script >

De bovenstaande regels code:

Definieer een functie met de naam “ Eerst ”.
In deze functiedefinitie wordt “ document.getElementById() 'methode heeft toegang tot het div-element waarvan de id 'cont1' is en past de ' stijl ” eigendom met een “ blok waarde eraan. Deze eigenschap geeft de inhoud weer van het tabblad waarop de gebruiker klikt.
Vervolgens heeft de “document.getElementById()” toegang tot een andere div en past de eigenschap “style” toe met de waarde “none” om deze te verbergen. Het zal dat element op de webpagina verbergen.
De bovenstaande methode wordt uitgevoerd voor de volgende geopende div-elementen. Dit komt omdat de functie “eerste” alleen de inhoud weergeeft van het tabblad waarvan de eigenschapswaarde “stijl” “blok” is en de andere verbergt.
De bovenstaande procedure wordt uitgevoerd voor de volgende functies “second()” en “third()”.

Uitvoer

Het is duidelijk dat de tabbladen met succes zijn gemaakt en hun respectieve inhoud tonen wanneer de gebruiker erop klikt.

Conclusie

Om tabbladen te maken, bouwt u eerst hun structuren met behulp van “HTML” en past u ze vervolgens aan met behulp van CSS-stijleigenschappen. De stijleigenschappen worden toegevoegd zonder dat er een extra stijlblad wordt geëxporteerd. Deze eigenschappen maken de tabbladen aantrekkelijk en opvallend. Zodra de tabbladen zijn gemaakt en aangepast, gebruikt u de programmeertaal JavaScript om er functionaliteiten aan toe te voegen. In deze handleiding wordt praktisch de volledige procedure uitgelegd voor het maken van tabbladen met CSS en JavaScript.

Hoe maak je tabbladen met CSS en JavaScript?