Táto príručka vysvetlí, ako vytvoriť karty pomocou CSS a JavaScriptu.
Ako vytvoriť karty pomocou CSS a JavaScriptu?
Táto časť obsahuje podrobné pokyny na vytváranie kariet pomocou CSS a JavaScriptu.
Krok 1: Vytvorte štruktúru kariet pomocou HTML
Najprv sa pozrite na kód HTML, ktorý vytvára štruktúru kariet HTML:
< div id = 'tab1' po kliknutí = 'najprv()' > Domov div >
< div id = 'tab2' po kliknutí = 'druhý();' > O div >
< div id = 'tab3' po kliknutí = 'tretí();' > Kontaktuj nás div >
< br />
< div id = 'cont1' > Vitajte v Linuxhint ! div >
< div id = 'cont2' > TECHNICKÉ VZDELÁVANIE
Vytvorili sme mnoho produktov, ktoré vám pomôžu dozvedieť sa viac o Linuxe, programovaní, informatike a ďalších.
div >
< div id = 'cont3' >
Náš tím môžete kontaktovať na adrese editor AT linuxhint DOT com.
div >
Vo vyššie uvedených riadkoch kódu:
- ' Značka ” pridáva prvok div s id “tab1” a pripojeným “ po kliknutí “ udalosť na vykonanie prepojeného “ najprv() ” po kliknutí naň. Tento prvok funguje ako karta HTML.
- Vyššie uvedená metóda sa vykonáva pre ďalšie dva prvky div.
- '
” tag pridáva zalomenie riadku.- '
” tag opäť vloží prvok div s priradeným id “cont1”. Tento prvok zobrazuje obsah vytvorenej karty v bloku.- Ďalšie dve“
Tagy tiež pridávajú prvky div s ich priradenými ID.
Krok 2: Štýl kariet pomocou CSSTeraz použite vlastnosti štýlu CSS na prispôsobenie kariet a ich obsahu podľa vášho výberu:
< štýl >
#tab1, #tab2, #tab3 {
plavák : vľavo ;
vypchávka : 5px 10px 5px 10px ;
pozadie : oranžová ;
farba : #FFFFFF ;
marža : 0px 5px 0px 5px ;
kurzor : ukazovateľ ;
hranica - polomer : 3px ;
}
#tab1 : podržte kurzor myši, #tab2 : podržte kurzor myši, #tab3 : vznášať sa {
pozadie : zelená ;
}
#cont1, #cont2, #cont3 {
šírka : 300 pixelov ;
výška : 100 pixelov ;
vypchávka : 40 pixelov ;
písmo - veľkosť : stredná ;
písmo - rodina : 'Times New Roman' , Times, pätka ;
hranica : 2px plné oranžovej farby ;
hranica - polomer : 7px ;
displej : žiadny ;
}
štýl >V uvedenom útržku kódu:
- Najprv prejdite na „ karty ” pomocou ich priradených ID a prispôsobte ich pomocou nasledujúcich vlastností štýlu (float, padding, background, color, margin: 0px 5px 0px 5px, kurzor a border-radius).
- Ďalej pripojte „ vznášať sa ” obslužný program udalostí s kartami na zmenu farieb pozadia, keď na ne používateľ umiestni kurzor myši.
- Potom prejdite na „ obsah kariet “ uložené v prvkoch div, ktorých ID sú „cont1“, „cont2“ a „cont3“. Teraz na ne použite nasledujúce vlastnosti štýlu (šírka, výška, výplň, veľkosť písma, rodina písiem, orámovanie, polomer orámovania a zobrazenie).
Krok 3: Pridajte funkcie na karty pomocou JavaScriptuNakoniec pridajte funkcie do vytvorených kariet pomocou JavaScriptu:
< skript >
najprv funkciu ( ) {
dokument. getElementById ( 'cont1' ) . štýl . displej = 'blok' ;
dokument. getElementById ( 'cont2' ) . štýl . displej = 'žiadny' ;
dokument. getElementById ( 'cont3' ) . štýl . displej = 'žiadny' ;
}
funkciu ako druhú ( ) {
dokument. getElementById ( 'cont2' ) . štýl . displej = 'blok' ;
dokument. getElementById ( 'cont1' ) . štýl . displej = 'žiadny' ;
dokument. getElementById ( 'cont3' ) . štýl . displej = 'žiadny' ;
}
funkcia tretia ( ) {
dokument. getElementById ( 'cont3' ) . štýl . displej = 'blok' ;
dokument. getElementById ( 'cont1' ) . štýl . displej = 'žiadny' ;
dokument. getElementById ( 'cont2' ) . štýl . displej = 'žiadny'
}
skript >Vyššie uvedené riadky kódu:
- Definujte funkciu s názvom „ najprv “.
- V tejto definícii funkcie „ document.getElementById() “ metóda pristupuje k prvku div, ktorého id je „cont1“ a aplikuje „ štýl “nehnuteľnosť s “ blokovať “hodnotu. Táto vlastnosť zobrazí obsah karty, na ktorú používateľ klikne.
- Potom „document.getElementById()“ pristúpi k inému divu a použije vlastnosť „style“ s hodnotou „none“, aby ho skryla. Skryje tento prvok na webovej stránke.
- Vyššie uvedená metóda sa vykonáva pre ďalšie prvky div, ku ktorým sa pristupuje. Je to preto, že funkcia „prvá“ zobrazuje iba obsah karty, ktorej hodnota vlastnosti „štýl“ je „blok“ a ostatné skryje.
- Vyššie uvedený postup sa vykonáva pre ďalšie funkcie „second()“ a „third()“.
Výkon
Je vidieť, že karty sú úspešne vytvorené a po kliknutí používateľa zobrazujú príslušný obsah.
Záver
Ak chcete vytvoriť karty, najprv vytvorte ich štruktúry pomocou „HTML“ a potom ich prispôsobte pomocou vlastností štýlu CSS. Vlastnosti štýlu sa pridajú bez exportovania akejkoľvek ďalšej šablóny so štýlmi. Vďaka týmto vlastnostiam sú záložky atraktívne a pútavé. Po vytvorení a prispôsobení kariet použite programovací jazyk JavaScript na pridanie funkcií do nich. Táto príručka prakticky vysvetlila celý postup vytvárania kariet pomocou CSS a JavaScriptu.