Šiame vadove bus paaiškinta, kaip sukurti skirtukus naudojant CSS ir JavaScript.
Kaip sukurti skirtukus naudojant CSS ir „JavaScript“?
Šiame skyriuje pateikiamos nuoseklios instrukcijos, kaip sukurti skirtukus naudojant CSS ir JavaScript.
1 veiksmas: sukurkite skirtukų struktūrą naudodami HTML
Pirmiausia pažiūrėkite į HTML kodą, kuris sukuria HTML skirtukų struktūrą:
< dal id = 'tab1' paspaudus = 'Pirmas()' > Namai div >
< dal id = 'tab2' paspaudus = 'antras ();' > Apie div >
< dal id = 'tab3' paspaudus = 'trečias();' > Susisiekite su mumis div >
< br />
< dal id = 'tęsinys1' > Sveiki atvykę į Linuxhint ! div >
< dal id = 'tęsinys2' > TECHNOLOGIJŲ UGDYMAS
Sukūrėme daug produktų, kurie padės jums sužinoti apie Linux, programavimą, kompiuterių mokslą ir kt.
div >
< dal id = 'tęsinys3' >
Galite susisiekti su mūsų komanda redaktoriumi AT linuxhint DOT com.
div >
Aukščiau pateiktose kodo eilutėse:
- „ “ žyma prideda „div“ elementą su ID „tab1“ ir pridedamu „ paspaudus 'įvykis, skirtas vykdyti susietą' Pirmas() “ funkciją, kai ją spustelėsite. Šis elementas veikia kaip HTML skirtukas.
- Aukščiau pateiktas metodas taikomas kitiems dviem div elementams.
- „
“ žyma prideda eilutės pertrauką.- „
“ žyma vėl įterpia div elementą, kuriam priskirtas ID „cont1“. Šis elementas rodo sukurto skirtuko turinį bloke.- Kiti du“
“ žymos taip pat prideda div elementus su jiems priskirtais ID.
2 veiksmas: sukurkite skirtukų stilių naudodami CSSDabar pritaikykite CSS stiliaus ypatybes, kad tinkintumėte skirtukus ir jų turinį pagal savo pasirinkimą:
< stilius >
#tab1, #tab2, #tab3 {
plūdė : paliko ;
kamšalas : 5 piks. 10 piks. 5 piks. 10 piks ;
fone : oranžinės spalvos ;
spalva : #FFFFFF ;
marža : 0px 5px 0px 5px ;
žymeklį : rodyklė ;
siena - spindulys : 3 piks ;
}
#tab1 : užveskite pelės žymeklį, #tab2 : užveskite pelės žymeklį, #tab3 : užveskite pelės žymeklį {
fone : žalias ;
}
#tęsinys1, #tęsinys2, #tęsinys3 {
plotis : 300 piks ;
aukščio : 100 piks ;
kamšalas : 40 piks ;
šriftas - dydis : vidutinis ;
šriftas - šeima : 'Times New Roman' , Times, serif ;
siena : 2px kietai oranžinės spalvos ;
siena - spindulys : 7px ;
ekranas : nė vienas ;
}
stilius >Nurodytame kodo fragmente:
- Pirmiausia pasiekite „ skirtukai “, naudodami jiems priskirtus ID, ir tinkinkite juos naudodami šias stiliaus ypatybes (plaukimas, užpildymas, fonas, spalva, paraštė: 0 piks. 5 piks. 0 piks. 5 piks., žymeklis ir kraštinės spindulys).
- Tada pridėkite „ užveskite pelės žymeklį “ įvykių tvarkytuvė su skirtukais, kad pakeistų jų fono spalvas, kai vartotojas užves ant jų pelės žymeklį.
- Po to eikite į „ skirtukų turinį “, saugomi div elementuose, kurių ID yra „cont1“, „cont2“ ir „cont3“. Dabar joms pritaikykite šias stiliaus ypatybes (plotis, aukštis, užpildymas, šrifto dydis, šriftų šeima, kraštinė, kraštinės spindulys ir ekranas).
3 veiksmas: pridėkite funkcijų prie skirtukų naudodami „JavaScript“.Galiausiai, naudodami „JavaScript“, pridėkite funkcijų prie sukurtų skirtukų:
< scenarijus >
funkcija pirmiausia ( ) {
dokumentas. getElementById ( 'tęsinys1' ) . stilius . ekranas = 'blokuoti' ;
dokumentas. getElementById ( 'tęsinys2' ) . stilius . ekranas = 'nė vienas' ;
dokumentas. getElementById ( 'tęsinys3' ) . stilius . ekranas = 'nė vienas' ;
}
funkcija antra ( ) {
dokumentas. getElementById ( 'tęsinys2' ) . stilius . ekranas = 'blokuoti' ;
dokumentas. getElementById ( 'tęsinys1' ) . stilius . ekranas = 'nė vienas' ;
dokumentas. getElementById ( 'tęsinys3' ) . stilius . ekranas = 'nė vienas' ;
}
funkcija trečia ( ) {
dokumentas. getElementById ( 'tęsinys3' ) . stilius . ekranas = 'blokuoti' ;
dokumentas. getElementById ( 'tęsinys1' ) . stilius . ekranas = 'nė vienas' ;
dokumentas. getElementById ( 'tęsinys2' ) . stilius . ekranas = 'nė vienas'
}
scenarijus >Aukščiau pateiktos kodo eilutės:
- Apibrėžkite funkciją pavadinimu ' Pirmas “.
- Šiame funkcijos apibrėžime „ document.getElementById() “ metodas pasiekia div elementą, kurio ID yra „cont1“, ir taiko „ stilius “ turtas su “ blokas “ vertė ant jo. Šioje ypatybėje bus rodomas skirtuko, kurį vartotojas spustelėja, turinys.
- Tada „document.getElementById()“ pasiekia kitą „div“ ir pritaiko „style“ ypatybę, turinčią reikšmę „none“, kad ją paslėptų. Jis paslėps tą elementą tinklalapyje.
- Aukščiau pateiktas metodas taikomas kitiems pasiekiamiems div elementams. Taip yra todėl, kad funkcija „pirmas“ rodo tik skirtuko, kurio „style“ ypatybės reikšmė yra „blokuoti“, turinį ir paslepia kitus.
- Aukščiau aprašyta procedūra atliekama kitoms „second()“ ir „third()“ funkcijoms.
Išvestis
Matyti, kad skirtukai sėkmingai sukurti ir naudotojui spustelėjus rodo atitinkamą turinį.
Išvada
Norėdami sukurti skirtukus, pirmiausia sukurkite jų struktūras naudodami „HTML“, o tada tinkinkite jas naudodami CSS stiliaus ypatybes. Stiliaus ypatybės pridedamos neeksportuojant jokio papildomo stiliaus lapo. Šios savybės daro skirtukus patrauklius ir traukiančius akį. Kai skirtukai bus sukurti ir pritaikyti, naudokite „JavaScript“ programavimo kalbą, kad pridėtumėte prie jų funkcijų. Šiame vadove praktiškai paaiškinta visa skirtukų su CSS ir JavaScript kūrimo procedūra.