Come creare schede con CSS e JavaScript?

HTML ' schede ” sono i blocchi che memorizzano il contenuto di un sito web in blocchi. Questi vengono utilizzati per visualizzare il contenuto archiviato utilizzando più approcci come clic del mouse, doppio clic, passaggio del mouse e molto altro. Le schede forniscono il modo più semplice per navigare tra le diverse pagine Web di un sito Web. Inoltre, aiutano anche a gestire lo spazio e a rendere il sito web più attraente e accattivante.

Questa guida spiegherà come creare schede con CSS e JavaScript.

Come creare schede con CSS e JavaScript?

Questa sezione contiene istruzioni passo passo per la creazione di schede con CSS e JavaScript.

Passaggio 1: crea una struttura a schede utilizzando HTML

Per prima cosa, guarda il codice HTML che crea la struttura delle schede HTML:

< ID div = 'scheda1' al clic = 'Primo()' > Casa div >

< ID div = 'scheda2' al clic = 'secondo();' > Di div >

< ID div = 'scheda3' al clic = 'terzo();' > Contattaci div >

< fratello />

< ID div = 'cont1' > Benvenuti in Linuxhint ! div >

< ID div = 'cont2' > EDUCAZIONE TECNOLOGICA

Abbiamo creato molti prodotti per aiutarti a conoscere Linux, programmazione, informatica e altro ancora.

div >

< ID div = 'cont3' >

Puoi contattare il nostro team presso l'editor AT linuxhint DOT com.

div >

Nelle righe di codice sopra:

IL '
' aggiunge un elemento div con un ID 'tab1' e un ' al clic 'evento per eseguire il collegamento' Primo() ' funzione quando si fa clic su di esso. Questo elemento funge da scheda HTML.
Il metodo sopra viene eseguito per i successivi due elementi div.
IL '
Il tag ' aggiunge un'interruzione di riga.
IL '
' Il tag inserisce nuovamente un elemento div avente un ID assegnato 'cont1'. Questo elemento mostra il contenuto della scheda creata in un blocco.
I prossimi due”
I tag aggiungono anche elementi div con gli ID assegnati.

Passaggio 2: stilizzare le schede utilizzando i CSS

Ora applica le proprietà di stile CSS per personalizzare le schede e il loro contenuto in base alla tua scelta:

< stile >

#tab1, #tab2, #tab3 {

galleggiante : Sinistra ;

imbottitura : 5px 10px 5px 10px ;

sfondo : rosso-arancio ;

colore : #FFFFFF ;

margine : 0px 5px 0px 5px ;

cursore : puntatore ;

confine - raggio : 3px ;

}

#tab1 : passa il mouse, #tab2 : passa il mouse, #tab3 : passa il mouse {

sfondo : verde ;

}

#cont1, #cont2, #cont3 {

larghezza : 300px ;

altezza : 100px ;

imbottitura : 40px ;

font - misurare : medio ;

font - famiglia : 'Times New Roman' , Tempi, serif ;

confine : 2px rosso-arancio solido ;

confine - raggio : 7px ;

Schermo : nessuno ;

}

stile >

Nello snippet di codice indicato:

Innanzitutto, accedi al “ schede ' utilizzando gli ID assegnati e personalizzali tramite le seguenti proprietà di stile (float, riempimento, sfondo, colore, margine: 0px 5px 0px 5px, cursore e raggio bordo).
Successivamente, allega il ' passa il mouse ' gestore eventi con le schede per modificare i colori di sfondo quando il mouse dell'utente passa sopra di esse.
Successivamente, accedi al ' contenuto delle schede ' memorizzato negli elementi div i cui ID sono 'cont1', 'cont2' e 'cont3'. Ora applica le seguenti proprietà di stile (larghezza, altezza, riempimento, dimensione del carattere, famiglia di caratteri, bordo, raggio del bordo e visualizzazione).

Passaggio 3: aggiungi funzionalità alle schede utilizzando JavaScript

Infine, aggiungi funzionalità alle schede create con l'aiuto di JavaScript:

< sceneggiatura >

prima la funzione ( ) {

documento. getElementById ( 'cont1' ) . stile . Schermo = 'bloccare' ;

documento. getElementById ( 'cont2' ) . stile . Schermo = 'nessuno' ;

documento. getElementById ( 'cont3' ) . stile . Schermo = 'nessuno' ;

}

funzione per secondo ( ) {

documento. getElementById ( 'cont2' ) . stile . Schermo = 'bloccare' ;

documento. getElementById ( 'cont1' ) . stile . Schermo = 'nessuno' ;

documento. getElementById ( 'cont3' ) . stile . Schermo = 'nessuno' ;

}

funzione terza ( ) {

documento. getElementById ( 'cont3' ) . stile . Schermo = 'bloccare' ;

documento. getElementById ( 'cont1' ) . stile . Schermo = 'nessuno' ;

documento. getElementById ( 'cont2' ) . stile . Schermo = 'nessuno'

}

sceneggiatura >

Le righe di codice sopra:

Definire una funzione denominata ' Primo ”.
In questa definizione di funzione, il “ document.getElementById() ' accede all'elemento div il cui ID è 'cont1' e applica il metodo ' stile 'proprietà con un' bloccare ' valore su di esso. Questa proprietà visualizzerà il contenuto della scheda su cui l'utente fa clic.
Successivamente, 'document.getElementById()' accede a un altro div e applica la proprietà 'style' con un valore 'none' per nasconderlo. Nasconderà quell'elemento sulla pagina web.
Il metodo precedente viene eseguito per gli elementi div a cui si accede successivamente. Questo perché la funzione “primo” mostra solo il contenuto della scheda il cui valore della proprietà “stile” è “blocco” e nasconde gli altri.
La procedura precedente viene eseguita per le successive funzioni “second()” e “terza()”.

Produzione

Si può vedere che le schede vengono create con successo e mostrano il rispettivo contenuto al clic dell'utente.

Conclusione

Per creare schede, crea prima le loro strutture utilizzando 'HTML', quindi personalizzale con l'aiuto delle proprietà di stile CSS. Le proprietà di stile vengono aggiunte senza esportare alcun foglio di stile aggiuntivo. Queste proprietà rendono le schede attraenti e accattivanti. Una volta create e personalizzate le schede, utilizza il linguaggio di programmazione JavaScript per aggiungere funzionalità ad esse. In questa guida è stata praticamente spiegata la procedura completa per creare schede con CSS e JavaScript.

Come creare schede con CSS e JavaScript?