Ipapaliwanag ng gabay na ito kung paano gumawa ng mga tab gamit ang CSS at JavaScript.
Paano Gumawa ng Mga Tab Gamit ang CSS at JavaScript?
Isinasagawa ng seksyong ito ang mga sunud-sunod na tagubilin para sa paggawa ng mga tab na may CSS at JavaScript.
Hakbang 1: Lumikha ng Istraktura ng Mga Tab Gamit ang HTML
Una, tingnan ang HTML code na lumilikha ng istraktura ng mga tab na HTML:
< div id = 'tab1' onclick = 'una()' > Bahay div >
< div id = 'tab2' onclick = 'pangalawa();' > Tungkol sa div >
< div id = 'tab3' onclick = 'pangatlo();' > Makipag-ugnayan sa amin div >
< br />
< div id = 'cont1' > Maligayang pagdating sa Linuxhint ! div >
< div id = 'cont2' > EDUKASYON SA TEKNOLOHIYA
Nakagawa kami ng maraming produkto para tulungan kang matuto tungkol sa Linux, Programming, Computer Science, at higit pa.
div >
< div id = 'cont3' >
Maaari kang makipag-ugnayan sa aming koponan sa editor AT linuxhint DOT com.
div >
Sa mga linya ng code sa itaas:
- Ang ' Ang tag na ” ay nagdaragdag ng isang elemento ng div na may id na “tab1” at isang kalakip na “ onclick ' kaganapan upang maisagawa ang naka-link na ' una() ” function kapag na-click ito. Ang elementong ito ay gumaganap bilang isang HTML na tab.
- Ang pamamaraan sa itaas ay ginagawa para sa susunod na dalawang elemento ng div.
- Ang '
Ang tag ay nagdaragdag ng isang line break.- Ang '
Ang tag na ” ay muling naglalagay ng div element na mayroong nakatalagang id na “cont1”. Ipinapakita ng elementong ito ang nilalaman ng nilikhang tab sa isang bloke.- Ang susunod na dalawa'
Ang mga tag ay nagdaragdag din ng mga elemento ng div kasama ng kanilang mga nakatalagang id.
Hakbang 2: Mga Style Tab Gamit ang CSSNgayon, ilapat ang mga katangian ng pag-istilo ng CSS upang i-customize ang mga tab at ang mga nilalaman nito ayon sa iyong pinili:
< istilo >
#tab1, #tab2, #tab3 {
lumutang : umalis ;
padding : 5px 10px 5px 10px ;
background : kulay kahel ;
kulay : #FFFFFF ;
margin : 0px 5px 0px 5px ;
cursor : panturo ;
hangganan - radius : 3px ;
}
#tab1 : mag-hover, #tab2 : mag-hover, #tab3 : hover {
background : berde ;
}
#cont1, #cont2, #cont3 {
lapad : 300px ;
taas : 100px ;
padding : 40px ;
font - laki : daluyan ;
font - pamilya : 'Times New Roman' , Times, serif ;
hangganan : 2px solid orangered ;
hangganan - radius : 7px ;
display : wala ;
}
istilo >Sa nakasaad na snippet ng code:
- Una, i-access ang ' mga tab ” gamit ang kanilang mga nakatalagang id at i-customize ang mga ito sa pamamagitan ng mga sumusunod na katangian ng istilo(float, padding, background, kulay, margin: 0px 5px 0px 5px, cursor, at border-radius).
- Susunod, ilakip ang ' hover ” tagapangasiwa ng kaganapan na may mga tab upang baguhin ang kanilang mga kulay ng background kapag nag-hover ang mouse ng user sa kanila.
- Pagkatapos nito, i-access ang ' nilalaman ng mga tab ” na nakaimbak sa mga elemento ng div na ang mga id ay “cont1”, “cont2”, at “cont3”. Ngayon, ilapat ang mga sumusunod na katangian ng estilo (lapad, taas, padding, laki ng font, pamilya ng font, hangganan, radius ng hangganan, at display) sa kanila.
Hakbang 3: Magdagdag ng Mga Pag-andar sa Mga Tab Gamit ang JavaScriptPanghuli, magdagdag ng mga functionality sa mga ginawang tab sa tulong ng JavaScript:
< script >
function muna ( ) {
dokumento. getElementById ( 'cont1' ) . istilo . display = 'harang' ;
dokumento. getElementById ( 'cont2' ) . istilo . display = 'wala' ;
dokumento. getElementById ( 'cont3' ) . istilo . display = 'wala' ;
}
pangalawa ang function ( ) {
dokumento. getElementById ( 'cont2' ) . istilo . display = 'harang' ;
dokumento. getElementById ( 'cont1' ) . istilo . display = 'wala' ;
dokumento. getElementById ( 'cont3' ) . istilo . display = 'wala' ;
}
ikatlo ang function ( ) {
dokumento. getElementById ( 'cont3' ) . istilo . display = 'harang' ;
dokumento. getElementById ( 'cont1' ) . istilo . display = 'wala' ;
dokumento. getElementById ( 'cont2' ) . istilo . display = 'wala'
}
script >Ang mga linya ng code sa itaas:
- Tukuyin ang isang function na pinangalanang ' una ”.
- Sa kahulugan ng function na ito, ang ' document.getElementById() ' na paraan ay nag-a-access sa div element na ang id ay 'cont1' at inilalapat ang ' istilo ' ari-arian na may ' harangan ” halaga nito. Ipapakita ng property na ito ang nilalaman ng tab kung saan nag-click ang user.
- Susunod, ina-access ng 'document.getElementById()' ang isa pang div at inilalapat ang property na 'style' na mayroong value na 'wala' upang itago ito. Itatago nito ang elementong iyon sa web page.
- Ang pamamaraan sa itaas ay ginagawa para sa susunod na na-access na mga elemento ng div. Ito ay dahil ang 'unang' function ay nagpapakita lamang ng nilalaman ng tab na ang 'estilo' na value ng property ay 'block' at itinatago ang iba.
- Ang pamamaraan sa itaas ay isinasagawa para sa susunod na 'pangalawa()' at 'pangatlo()' na mga function.
Output
Makikita na ang mga tab ay matagumpay na nalikha at nagpapakita ng kani-kanilang nilalaman sa pag-click ng gumagamit.
Konklusyon
Upang lumikha ng mga tab, buuin muna ang kanilang mga istruktura gamit ang 'HTML', at pagkatapos ay i-customize ang mga ito sa tulong ng mga katangian ng pag-istilo ng CSS. Ang mga katangian ng pag-istilo ay idinaragdag nang hindi nag-e-export ng anumang karagdagang style sheet. Ang mga katangiang ito ay ginagawang kaakit-akit at kapansin-pansin ang mga tab. Kapag ang mga tab ay ginawa at na-customize, pagkatapos ay gamitin ang JavaScript programming language upang magdagdag ng mga functionality sa kanila. Praktikal na ipinaliwanag ng gabay na ito ang kumpletong pamamaraan sa paggawa ng mga tab na may CSS at JavaScript.