Kā izveidot cilnes, izmantojot CSS un JavaScript?

HTML ' cilnes ” ir bloki, kas glabā vietnes saturu gabalos. Tos izmanto, lai parādītu saglabāto saturu, izmantojot vairākas pieejas, piemēram, peles klikšķi, dubultklikšķi, kursoru un daudz ko citu. Cilnes nodrošina vienkāršāko veidu, kā pārvietoties pa dažādām vietnes tīmekļa lapām. Turklāt tie palīdz arī pārvaldīt telpu un padarīt vietni pievilcīgāku un pievilcīgāku.

Šajā rokasgrāmatā ir paskaidrots, kā izveidot cilnes, izmantojot CSS un JavaScript.

Kā izveidot cilnes, izmantojot CSS un JavaScript?

Šajā sadaļā ir sniegti soli pa solim norādījumi par ciļņu izveidi, izmantojot CSS un JavaScript.

1. darbība. Izveidojiet ciļņu struktūru, izmantojot HTML

Vispirms apskatiet HTML kodu, kas veido HTML ciļņu struktūru:

< div id = 'tab1' onclick = 'pirmais()' > Mājas div >

< div id = 'tab2' onclick = 'otrais ();' > Par div >

< div id = 'tab3' onclick = 'trešais ();' > Sazinies ar mums div >

< br />

< div id = 'turpinājums1' > Laipni lūdzam Linuxhint ! div >

< div id = 'turpinājums2' > TEHNOLOĢIJAS IZGLĪTĪBA

Mēs esam izveidojuši daudzus produktus, lai palīdzētu jums uzzināt par Linux, programmēšanu, datorzinātnēm un citiem.

div >

< div id = 'turpinājums3' >

Jūs varat sazināties ar mūsu komandu redaktorā AT linuxhint DOT com.

div >

Iepriekš minētajās koda rindās:

'
' tag pievieno div elementu ar ID 'tab1' un pievienotu ' onclick 'notikums, lai izpildītu saistīto' pirmais () ” funkciju, kad uz tās tiek noklikšķināts. Šis elements darbojas kā HTML cilne.
Iepriekš minētā metode tiek veikta nākamajiem diviem div elementiem.
'
” tags pievieno rindiņas pārtraukumu.
'
” tags atkal ievieto div elementu, kam piešķirts ID “cont1”. Šis elements parāda izveidotās cilnes saturu blokā.
Nākamie divi'
” tagi pievieno arī div elementus ar tiem piešķirtajiem ID.

2. darbība. Veidojiet cilnes, izmantojot CSS

Tagad izmantojiet CSS stila rekvizītus, lai pielāgotu cilnes un to saturu atbilstoši savai izvēlei:

< stils >

#tab1, #tab2, #tab3 {

peldēt : pa kreisi ;

polsterējums : 5 pikseļi 10 pikseļi 5 pikseļi 10 pikseļi ;

fons : oranžēti ;

krāsa : #FFFFFF ;

starpība : 0px 5px 0px 5px ;

kursors : rādītājs ;

robeža - rādiuss : 3 pikseļi ;

}

#tab1 : virziet kursoru, #tab2 : virziet kursoru, #tab3 : novietojiet kursoru {

fons : zaļš ;

}

#turpinājums1, #turpinājums2, #turpinājums3 {

platums : 300 pikseļi ;

augstums : 100 pikseļi ;

polsterējums : 40 pikseļi ;

fontu - Izmērs : vidējs ;

fontu - ģimene : 'Times New Roman' , Times, serif ;

robeža : 2 pikseļi vienkrāsains, oranžs ;

robeža - rādiuss : 7 pikseļi ;

displejs : neviens ;

}

stils >

Norādītajā koda fragmentā:

Pirmkārt, piekļūstiet ' cilnes ”, izmantojot piešķirtos ID, un pielāgojiet tos, izmantojot šādus stila rekvizītus (pludiņš, polsterējums, fons, krāsa, piemale: 0 pikseļi 5 pikseļi 0 pikseļi 5 pikseļi, kursors un apmales rādiuss).
Pēc tam pievienojiet ' novietojiet kursoru ” notikumu apstrādātājs ar cilnēm, lai mainītu to fona krāsas, kad lietotājs novieto peles kursoru virs tām.
Pēc tam piekļūstiet ' cilnes saturs ” tiek saglabāti div elementos, kuru id ir “cont1”, “cont2” un “cont3”. Tagad izmantojiet tiem šādus stila rekvizītus (platums, augstums, polsterējums, fonta lielums, fontu saime, apmale, apmales rādiuss un displejs).

3. darbība. Pievienojiet cilnēm funkcijas, izmantojot JavaScript

Visbeidzot, ar JavaScript palīdzību pievienojiet izveidotajām cilnēm funkcijas:

< skripts >

vispirms funkcija ( ) {

dokumentu. getElementById ( 'turpinājums1' ) . stils . displejs = 'bloķēt' ;

dokumentu. getElementById ( 'turpinājums2' ) . stils . displejs = 'neviens' ;

dokumentu. getElementById ( 'turpinājums3' ) . stils . displejs = 'neviens' ;

}

funkcija otrā ( ) {

dokumentu. getElementById ( 'turpinājums2' ) . stils . displejs = 'bloķēt' ;

dokumentu. getElementById ( 'turpinājums1' ) . stils . displejs = 'neviens' ;

dokumentu. getElementById ( 'turpinājums3' ) . stils . displejs = 'neviens' ;

}

funkcija trešā ( ) {

dokumentu. getElementById ( 'turpinājums3' ) . stils . displejs = 'bloķēt' ;

dokumentu. getElementById ( 'turpinājums1' ) . stils . displejs = 'neviens' ;

dokumentu. getElementById ( 'turpinājums2' ) . stils . displejs = 'neviens'

}

skripts >

Iepriekš minētās koda rindas:

Definējiet funkciju ar nosaukumu ' vispirms ”.
Šajā funkcijas definīcijā “ document.getElementById() metode piekļūst div elementam, kura ID ir “cont1” un piemēro “ stils 'īpašums ar ' bloķēt ” vērtību uz tā. Šis rekvizīts parādīs tās cilnes saturu, uz kuras lietotājs noklikšķina.
Pēc tam “document.getElementById()” piekļūst citam div un lieto rekvizītu “style” ar vērtību “none”, lai to paslēptu. Tas paslēps šo elementu tīmekļa lapā.
Iepriekš minētā metode tiek veikta nākamajiem div elementiem, kuriem piekļūts. Tas ir tāpēc, ka funkcija “first” parāda tikai tās cilnes saturu, kuras rekvizīta “style” vērtība ir “block”, un paslēpj pārējos.
Iepriekš minētā procedūra tiek veikta nākamajām “second()” un “third()” funkcijām.

Izvade

Redzams, ka cilnes ir veiksmīgi izveidotas un lietotājam noklikšķinot tiek rādīts to attiecīgais saturs.

Secinājums

Lai izveidotu cilnes, vispirms izveidojiet to struktūras, izmantojot “HTML”, un pēc tam pielāgojiet tās, izmantojot CSS stila rekvizītus. Veidošanas rekvizīti tiek pievienoti, neeksportējot nekādu papildu stila lapu. Šīs īpašības padara cilnes pievilcīgas un pievilcīgas. Kad cilnes ir izveidotas un pielāgotas, izmantojiet JavaScript programmēšanas valodu, lai tām pievienotu funkcijas. Šajā rokasgrāmatā ir praktiski izskaidrota visa procedūra, lai izveidotu cilnes ar CSS un JavaScript.

Kā izveidot cilnes, izmantojot CSS un JavaScript?