Com crear pestanyes amb CSS i JavaScript?

HTML ' pestanyes ” són els blocs que emmagatzemen el contingut d'un lloc web en trossos. S'utilitzen per mostrar el contingut emmagatzemat mitjançant diversos enfocaments, com ara el clic del ratolí, el doble clic, el desplaçament del cursor i molt més. Les pestanyes proporcionen la manera més senzilla de navegar per les diferents pàgines web d'un lloc web. A més, també ajuden a gestionar l'espai i a fer que la web sigui més atractiva i cridanera.

Aquesta guia explicarà com crear pestanyes amb CSS i JavaScript.

Com crear pestanyes amb CSS i JavaScript?

Aquesta secció porta a terme instruccions pas a pas per a la creació de pestanyes amb CSS i JavaScript.

Pas 1: creeu una estructura de pestanyes amb HTML

Primer, mireu el codi HTML que crea l'estructura de les pestanyes HTML:

< id div = 'tab1' fent clic = 'primer()' > Casa div >

< id div = 'tab2' fent clic = 'segon();' > Sobre div >

< id div = 'tab3' fent clic = 'tercer();' > Contacta amb nosaltres div >

< br />

< id div = 'cont1' > Benvingut a Linuxhint ! div >

< id div = 'cont2' > EDUCACIÓ TECNOLOGICA

Hem creat molts productes per ajudar-vos a conèixer Linux, programació, informàtica i molt més.

div >

< id div = 'cont3' >

Podeu contactar amb el nostre equip a l'editor AT linuxhint DOT com.

div >

A les línies de codi anteriors:

El '
'l'etiqueta afegeix un element div amb un identificador 'tab1' i un ' adjunt ' fent clic ” esdeveniment per executar l'enllaç “ primer() ” quan es fa clic. Aquest element actua com una pestanya HTML.
El mètode anterior es realitza per als dos elements div següents.
El '
” afegeix un salt de línia.
El '
” L'etiqueta torna a inserir un element div amb un identificador assignat “cont1”. Aquest element mostra el contingut de la pestanya creada en un bloc.
Els dos següents'
Les etiquetes també afegeixen elements div amb els seus identificadors assignats.

Pas 2: Pestanyes d'estil amb CSS

Ara, apliqueu les propietats d'estil CSS per personalitzar les pestanyes i el seu contingut segons la vostra elecció:

< estil >

#tab1, #tab2, #tab3 {

flotar : esquerra ;

farciment : 5px 10px 5px 10px ;

fons : vermell taronja ;

color : #FFFFFF ;

marge : 0px 5px 0px 5px ;

cursor : punter ;

frontera - radi : 3 píxels ;

}

#tab1 : passa el cursor, #tab2 : passa el cursor, #tab3 : flotar {

fons : verd ;

}

#cont1, #cont2, #cont3 {

amplada : 300 píxels ;

alçada : 100 píxels ;

farciment : 40 píxels ;

Font - mida : mitjà ;

Font - família : 'Times New Roman' , Times, serif ;

frontera : 2px vermell ataronjat sòlid ;

frontera - radi : 7 píxels ;

visualització : cap ;

}

estil >

Al fragment de codi indicat:

En primer lloc, accediu al ' pestanyes ” fent servir els seus identificadors assignats i personalitzar-los mitjançant les propietats d'estil següents (float, farciment, fons, color, marge: 0px 5px 0px 5px, cursor i radi de vora).
A continuació, adjunteu el ' flotar ” controlador d'esdeveniments amb les pestanyes per canviar els colors de fons quan el ratolí de l'usuari passa per sobre d'elles.
Després d'això, accediu al ' contingut de les pestanyes ” emmagatzemat als elements div els identificadors dels quals són “cont1”, “cont2” i “cont3”. Ara, apliqueu-hi les propietats d'estil següents (amplada, alçada, farciment, mida de lletra, família de tipus de lletra, vora, radi de vora i visualització).

Pas 3: afegiu funcionalitats a les pestanyes mitjançant JavaScript

Finalment, afegiu funcionalitats a les pestanyes creades amb l'ajuda de JavaScript:

< guió >

funció primer ( ) {

document. getElementById ( 'cont1' ) . estil . visualització = 'bloc' ;

document. getElementById ( 'cont2' ) . estil . visualització = 'cap' ;

document. getElementById ( 'cont3' ) . estil . visualització = 'cap' ;

}

funció segona ( ) {

document. getElementById ( 'cont2' ) . estil . visualització = 'bloc' ;

document. getElementById ( 'cont1' ) . estil . visualització = 'cap' ;

document. getElementById ( 'cont3' ) . estil . visualització = 'cap' ;

}

tercera funció ( ) {

document. getElementById ( 'cont3' ) . estil . visualització = 'bloc' ;

document. getElementById ( 'cont1' ) . estil . visualització = 'cap' ;

document. getElementById ( 'cont2' ) . estil . visualització = 'cap'

}

guió >

Les línies de codi anteriors:

Definiu una funció anomenada ' primer ”.
En aquesta definició de funció, el ' document.getElementById() ” accedeix a l'element div l'identificador del qual és “cont1” i aplica el “ estil ' propietat amb ' bloc ” valora-hi. Aquesta propietat mostrarà el contingut de la pestanya en què l'usuari faci clic.
A continuació, 'document.getElementById()' accedeix a un altre div i aplica la propietat 'style' amb un valor 'none' per amagar-lo. Amagarà aquest element a la pàgina web.
El mètode anterior es realitza per als següents elements div accedits. Això es deu al fet que la funció 'primera' només mostra el contingut de la pestanya el valor de la propietat 'estil' de la qual és 'bloquejar' i amaga les altres.
El procediment anterior es realitza per a les següents funcions 'segon()' i 'tercer()'.

Sortida

Es pot veure que les pestanyes s'han creat correctament i mostren el seu contingut respectiu al clic de l'usuari.

Conclusió

Per crear pestanyes, primer construïu les seves estructures amb 'HTML' i després personalitzeu-les amb l'ajuda de les propietats d'estil CSS. Les propietats d'estil s'afegeixen sense exportar cap full d'estil addicional. Aquestes propietats fan que les pestanyes siguin atractives i atractives. Un cop creades i personalitzades les pestanyes, feu servir el llenguatge de programació JavaScript per afegir-hi funcionalitats. Aquesta guia ha explicat pràcticament el procediment complet per crear pestanyes amb CSS i JavaScript.

Com crear pestanyes amb CSS i JavaScript?