Kuinka luoda välilehtiä CSS:n ja JavaScriptin avulla?

HTML ' välilehdet ” ovat lohkoja, jotka tallentavat verkkosivuston sisällön paloina. Niitä käytetään tallennetun sisällön näyttämiseen useilla eri tavoilla, kuten hiiren napsautuksella, kaksoisnapsauttamalla, viemällä hiiri ja paljon muuta. Välilehdet ovat yksinkertaisin tapa selata verkkosivuston eri verkkosivuja. Lisäksi ne auttavat myös tilan hallinnassa ja tekevät sivustosta houkuttelevamman ja katseenvangitsijamman.

Tämä opas selittää, kuinka välilehtiä luodaan CSS:n ja JavaScriptin avulla.

Kuinka luoda välilehtiä CSS:n ja JavaScriptin avulla?

Tässä osiossa on vaiheittaiset ohjeet välilehtien luomiseen CSS:llä ja JavaScriptillä.

Vaihe 1: Luo välilehtirakenne HTML:n avulla

Katso ensin HTML-koodia, joka luo HTML-välilehtien rakenteen:

< div id = 'tab1' klikkaamalla = 'ensimmäinen()' > Koti div >

< div id = 'tab2' klikkaamalla = 'toinen();' > Noin div >

< div id = 'tab3' klikkaamalla = 'kolmas();' > Ota meihin yhteyttä div >

< br />

< div id = 'jatkuu1' > Tervetuloa Linuxhintiin ! div >

< div id = 'jatkuu2' > TEKNOLOGIAN KOULUTUS

Olemme rakentaneet monia tuotteita, joiden avulla voit oppia Linuxista, ohjelmoinnista, tietojenkäsittelytieteestä ja muusta.

div >

< div id = 'jatkuu3' >

Voit ottaa yhteyttä tiimiimme osoitteessa editor AT linuxhint DOT com.

div >

Yllä olevilla koodiriveillä:

'
' -tunniste lisää div-elementin tunnuksella 'tab1' ja liitteenä ' klikkaamalla 'tapahtuma suorittaa linkitetty' ensimmäinen() ”-toimintoa, kun sitä napsautetaan. Tämä elementti toimii HTML-välilehtenä.
Yllä oleva menetelmä suoritetaan kahdelle seuraavalle div-elementille.
'
' -tunniste lisää rivinvaihdon.
'
' -tunniste lisää jälleen div-elementin, jolla on määritetty tunnus 'cont1'. Tämä elementti näyttää luodun välilehden sisällön lohkona.
Kaksi seuraavaa'
” -tunnisteet lisäävät myös div-elementtejä niille määritetyillä tunnuksilla.

Vaihe 2: Tyylivälilehdet CSS:n avulla

Käytä nyt CSS-tyyliominaisuuksia mukauttaaksesi välilehtiä ja niiden sisältöä valintasi mukaan:

< tyyli >

#tab1, #tab2, #tab3 {

kellua : vasemmalle ;

pehmuste : 5px 10px 5px 10px ;

tausta : oranssinpunainen ;

väri : #FFFFFF ;

marginaali : 0px 5px 0px 5px ;

kohdistin : osoitin ;

rajaa - säde : 3px ;

}

#tab1 : hover, #tab2 : hover, #tab3 : leijuu {

tausta : vihreä ;

}

#jatkoa1, #jatkoa2, #jatkoa3 {

leveys : 300 pikseliä ;

korkeus : 100 pikseliä ;

pehmuste : 40 pikseliä ;

fontti - koko : keskikokoinen ;

fontti - perhe : 'Times New Roman' , Times, serif ;

rajaa : 2px kiinteä oranssi ;

rajaa - säde : 7px ;

näyttö : ei mitään ;

}

tyyli >

Ilmoitetussa koodinpätkässä:

Avaa ensin ' välilehdet ' käyttämällä määritettyjä tunnuksia ja mukauttaa niitä seuraavilla tyyliominaisuuksilla (kelluke, täyte, tausta, väri, marginaali: 0px 5px 0px 5px, kohdistin ja reunan säde).
Liitä seuraavaksi ' leijuu ” tapahtumakäsittelijä välilehtien kanssa muuttaakseen taustavärejä, kun käyttäjä vie hiiren niiden päälle.
Tämän jälkeen avaa ' välilehtien sisältö ' tallennettu div-elementteihin, joiden tunnukset ovat 'cont1', 'cont2' ja 'cont3'. Käytä nyt seuraavia tyyliominaisuuksia (leveys, korkeus, täyte, kirjasinkoko, kirjasinperhe, reunus, reunan säde ja näyttö).

Vaihe 3: Lisää toimintoja välilehtiin JavaScriptin avulla

Lisää lopuksi toimintoja luotuihin välilehtiin JavaScriptin avulla:

< käsikirjoitus >

toimi ensin ( ) {

asiakirja. getElementById ( 'jatkuu1' ) . tyyli . näyttö = 'lohko' ;

asiakirja. getElementById ( 'jatkuu2' ) . tyyli . näyttö = 'ei mitään' ;

asiakirja. getElementById ( 'jatkuu3' ) . tyyli . näyttö = 'ei mitään' ;

}

toiminto toiseksi ( ) {

asiakirja. getElementById ( 'jatkuu2' ) . tyyli . näyttö = 'lohko' ;

asiakirja. getElementById ( 'jatkuu1' ) . tyyli . näyttö = 'ei mitään' ;

asiakirja. getElementById ( 'jatkuu3' ) . tyyli . näyttö = 'ei mitään' ;

}

toiminto kolmas ( ) {

asiakirja. getElementById ( 'jatkuu3' ) . tyyli . näyttö = 'lohko' ;

asiakirja. getElementById ( 'jatkuu1' ) . tyyli . näyttö = 'ei mitään' ;

asiakirja. getElementById ( 'jatkuu2' ) . tyyli . näyttö = 'ei mitään'

}

käsikirjoitus >

Yllä olevat koodirivit:

Määritä funktio nimeltä ' ensimmäinen ”.
Tässä funktion määritelmässä ' document.getElementById() ' -menetelmä käyttää div-elementtiä, jonka tunnus on 'cont1' ja käyttää ' tyyli ' kiinteistö ' lohko ”arvoa siinä. Tämä ominaisuus näyttää välilehden sisällön, jota käyttäjä napsauttaa.
Seuraavaksi 'document.getElementById()' käyttää toista div-toimintoa ja piilottaa sen käyttämällä 'style'-ominaisuutta, jonka arvo on 'ei'. Se piilottaa kyseisen elementin verkkosivulta.
Yllä oleva menetelmä suoritetaan seuraaville avatuille div-elementeille. Tämä johtuu siitä, että 'ensimmäinen'-toiminto näyttää vain sen välilehden sisällön, jonka 'tyyli'-ominaisuuden arvo on 'block' ja piilottaa muut.
Yllä oleva toimenpide suoritetaan seuraaville 'second()'- ja 'third()'-funktioille.

Lähtö

Voidaan nähdä, että välilehdet on luotu onnistuneesti ja ne näyttävät vastaavan sisällön käyttäjän napsautuksella.

Johtopäätös

Luodaksesi välilehtiä, rakenna ensin niiden rakenteet käyttämällä HTML-koodia ja muokkaa niitä sitten CSS-tyyliominaisuuksien avulla. Tyyliominaisuudet lisätään viemättä ylimääräistä tyylisivua. Nämä ominaisuudet tekevät välilehdistä houkuttelevia ja huomiota herättäviä. Kun välilehdet on luotu ja mukautettu, lisää niihin toimintoja JavaScript-ohjelmointikielellä. Tässä oppaassa on käytännössä selitetty koko menettely välilehtien luomiseksi CSS:llä ja JavaScriptillä.

Kuinka luoda välilehtiä CSS:n ja JavaScriptin avulla?