Kuidas luua vahekaarte CSS-i ja JavaScriptiga?

HTML ' vahelehed ” on plokid, mis salvestavad veebisaidi sisu tükkidena. Neid kasutatakse salvestatud sisu kuvamiseks, kasutades erinevaid lähenemisviise, nagu hiireklõps, topeltklõps, kursor ja palju muud. Vahekaardid pakuvad lihtsaimat viisi veebisaidi erinevatel veebilehtedel navigeerimiseks. Lisaks aitavad need ka ruumi hallata ning kodulehte atraktiivsemaks ja pilkupüüdvamaks muuta.

See juhend selgitab, kuidas luua CSS-i ja JavaScriptiga vahekaarte.

Kuidas luua vahekaarte CSS-i ja JavaScriptiga?

Selles jaotises on samm-sammult juhised CSS-i ja JavaScriptiga vahekaartide loomiseks.

1. samm: looge HTML-i abil vahekaartide struktuur

Kõigepealt vaadake HTML-koodi, mis loob HTML-i vahekaartide struktuuri:

< divi id = 'tab1' onclick = 'esimene()' > Kodu div >

< divi id = 'tab2' onclick = 'teine();' > Umbes div >

< divi id = 'tab3' onclick = 'kolmas();' > Võta meiega ühendust div >

< br />

< divi id = 'jätk1' > Tere tulemast Linuxhinti ! div >

< divi id = 'jätk2' > TEHNOLOOGIAHARIDUS

Oleme loonud palju tooteid, mis aitavad teil õppida Linuxi, programmeerimise, arvutiteaduse ja muu kohta.

div >

< divi id = 'jätk3' >

Meie meeskonnaga saate ühendust võtta aadressil toimetaja AT linuxhint DOT com.

div >

Ülaltoodud koodiridades:

'
märgend lisab div elemendi ID-ga 'tab1' ja lisatud ' onclick 'sündmus lingitud' esimene () ” funktsiooni, kui sellel klõpsata. See element toimib HTML-i vahekaardina.
Ülaltoodud meetod viiakse läbi kahe järgmise div elemendi jaoks.
'
” silt lisab reavahetuse.
'
märgend lisab uuesti div elemendi, millel on määratud ID 'cont1'. See element näitab loodud vahelehe sisu plokis.
Järgmised kaks'
” sildid lisavad ka divi elemente koos neile määratud ID-dega.

2. samm: kujundage vahelehed CSS-i abil

Nüüd kasutage CSS-i stiiliatribuute, et kohandada vahekaarte ja nende sisu vastavalt oma valikule:

< stiilis >

#tab1, #tab2, #tab3 {

ujuk : vasakule ;

polsterdus : 5px 10px 5px 10px ;

taustal : oranžikas ;

värvi : #FFFFFF ;

marginaal : 0px 5px 0px 5px ;

kursor : osuti ;

piir - raadius : 3 pikslit ;

}

#tab1 : hõljutage, #tab2 : hõljutage, #tab3 : hõljuma {

taustal : roheline ;

}

#cont1, #cont2, #cont3 {

laius : 300 pikslit ;

kõrgus : 100 pikslit ;

polsterdus : 40 pikslit ;

font - suurus : keskmine ;

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

piir : 2px tahke oranžikas ;

piir - raadius : 7 pikslit ;

kuva : mitte ühtegi ;

}

stiilis >

Nimetatud koodilõigul:

Esiteks avage ' vahelehed ” kasutades neile määratud ID-sid ja kohandada neid järgmiste stiiliatribuutide kaudu (ujuk, polster, taust, värv, veeris: 0px 5px 0px 5px, kursor ja piiriraadius).
Järgmisena lisage ' hõljuma ” sündmuste töötleja vahekaartidega, et muuta nende taustavärve, kui kasutaja hõljutab kursorit nende kohal.
Pärast seda avage ' vahelehtede sisu ” salvestatakse div-elementidesse, mille ID-d on “cont1”, “cont2” ja “cont3”. Nüüd rakendage neile järgmisi stiiliatribuute (laius, kõrgus, polsterdus, fondi suurus, fondiperekond, ääris, äärise raadius ja kuva).

3. samm: lisage JavaScripti abil vahekaartidele funktsioone

Lõpuks lisage JavaScripti abil loodud vahekaartidele funktsioone:

< stsenaarium >

funktsioon kõigepealt ( ) {

dokument. getElementById ( 'jätk1' ) . stiilis . kuva = 'blokk' ;

dokument. getElementById ( 'jätk2' ) . stiilis . kuva = 'mitte ükski' ;

dokument. getElementById ( 'jätk3' ) . stiilis . kuva = 'mitte ükski' ;

}

funktsioon teiseks ( ) {

dokument. getElementById ( 'jätk2' ) . stiilis . kuva = 'blokk' ;

dokument. getElementById ( 'jätk1' ) . stiilis . kuva = 'mitte ükski' ;

dokument. getElementById ( 'jätk3' ) . stiilis . kuva = 'mitte ükski' ;

}

funktsioon kolmas ( ) {

dokument. getElementById ( 'jätk3' ) . stiilis . kuva = 'blokk' ;

dokument. getElementById ( 'jätk1' ) . stiilis . kuva = 'mitte ükski' ;

dokument. getElementById ( 'jätk2' ) . stiilis . kuva = 'mitte ükski'

}

stsenaarium >

Ülaltoodud koodiread:

Määrake funktsioon nimega ' esiteks ”.
Selles funktsiooni definitsioonis on ' document.getElementById() meetod pääseb juurde div elemendile, mille ID on 'cont1' ja rakendab ' stiilis ' kinnisvara koos ' blokk ” väärtus sellel. See atribuut kuvab selle vahekaardi sisu, millel kasutaja klõpsab.
Järgmisena pääseb fail 'document.getElementById()' juurde teisele div-ile ja rakendab selle peitmiseks atribuuti 'style', mille väärtus on 'none'. See peidab selle elemendi veebilehel.
Ülaltoodud meetod viiakse läbi järgmiste juurdepääsetavate div-elementide jaoks. Selle põhjuseks on asjaolu, et funktsioon 'first' kuvab ainult selle vahekaardi sisu, mille atribuudi 'style' väärtus on 'block' ja peidab ülejäänud.
Ülaltoodud protseduur viiakse läbi järgmiste funktsioonide 'second()' ja 'third()' jaoks.

Väljund

On näha, et vahekaardid on edukalt loodud ja kuvavad kasutaja klõpsamisel nende vastavat sisu.

Järeldus

Vahekaartide loomiseks looge esmalt nende struktuurid HTML-i abil ja seejärel kohandage neid CSS-i stiiliatribuutide abil. Stiili omadused lisatakse ilma täiendavat laadilehte eksportimata. Need omadused muudavad sakid atraktiivseks ja pilkupüüdvaks. Kui vahekaardid on loodud ja kohandatud, kasutage neile funktsioonide lisamiseks JavaScripti programmeerimiskeelt. See juhend on praktiliselt selgitanud CSS-i ja JavaScriptiga vahekaartide loomise täielikku protseduuri.

Kuidas luua vahekaarte CSS-i ja JavaScriptiga?