Tato příručka vysvětlí, jak vytvářet karty pomocí CSS a JavaScriptu.
Jak vytvořit karty pomocí CSS a JavaScriptu?
Tato část obsahuje podrobné pokyny pro vytváření karet pomocí CSS a JavaScriptu.
Krok 1: Vytvořte strukturu karet pomocí HTML
Nejprve se podívejte na HTML kód, který vytváří strukturu HTML tabs:
< div id = 'tab1' při kliknutí = 'První()' > Domov div >
< div id = 'tab2' při kliknutí = 'druhý();' > O div >
< div id = 'tab3' při kliknutí = 'Třetí();' > Kontaktujte nás div >
< br />
< div id = 'pokračování1' > Vítejte v Linuxhintu ! div >
< div id = 'pokračování2' > TECHNOLOGICKÉ VZDĚLÁVÁNÍ
Vytvořili jsme mnoho produktů, které vám pomohou dozvědět se o Linuxu, programování, informatice a dalších.
div >
< div id = 'pokračování3' >
Náš tým můžete kontaktovat na adrese editor AT linuxhint DOT com.
div >
Ve výše uvedených řádcích kódu:
- ' Tag přidá prvek div s id „tab1“ a připojeným „ při kliknutí ” událost k provedení propojeného “ První() ” po kliknutí na něj. Tento prvek funguje jako karta HTML.
- Výše uvedená metoda se provádí pro další dva prvky div.
- '
” přidá zalomení řádku.- '
” opět vloží prvek div s přiřazeným id “cont1”. Tento prvek zobrazuje obsah vytvořené karty v bloku.- Další dva'
Tagy také přidávají prvky div s jejich přiřazenými ID.
Krok 2: Styl karet pomocí CSSNyní použijte vlastnosti stylů CSS a přizpůsobte karty a jejich obsah podle svého výběru:
< styl >
#tab1, #tab2, #tab3 {
plovák : vlevo, odjet ;
vycpávka : 5px 10px 5px 10px ;
Pozadí : oranžová červená ;
barva : #FFFFFF ;
okraj : 0px 5px 0px 5px ;
kurzor : ukazatel ;
okraj - poloměr : 3px ;
}
#tab1 : umístěte kurzor, #tab2 : umístěte kurzor myši, #tab3 : vznášet se {
Pozadí : zelená ;
}
#cont1, #cont2, #cont3 {
šířka : 300 pixelů ;
výška : 100 pixelů ;
vycpávka : 40 pixelů ;
písmo - velikost : střední ;
písmo - rodina : 'Times New Roman' , Times, patka ;
okraj : 2px plná oranžová ;
okraj - poloměr : 7px ;
Zobrazit : žádný ;
}
styl >V uvedeném úryvku kódu:
- Nejprve přejděte na „ karty ” pomocí jejich přiřazených ID a přizpůsobte je pomocí následujících vlastností stylu (plovoucí, odsazení, pozadí, barva, okraj: 0px 5px 0px 5px, kurzor a border-radius).
- Dále připojte „ vznášet se ” obslužný program událostí s kartami pro změnu jejich barvy pozadí, když na ně uživatel najede myší.
- Poté přejděte na „ obsah karet “ uložené v prvcích div, jejichž ID jsou „cont1“, „cont2“ a „cont3“. Nyní na ně použijte následující vlastnosti stylu (šířka, výška, odsazení, velikost písma, rodina písem, ohraničení, poloměr ohraničení a zobrazení).
Krok 3: Přidejte funkce na karty pomocí JavaScriptuNakonec přidejte funkce do vytvořených karet pomocí JavaScriptu:
< skript >
funkce jako první ( ) {
dokument. getElementById ( 'pokračování1' ) . styl . Zobrazit = 'blok' ;
dokument. getElementById ( 'pokračování2' ) . styl . Zobrazit = 'žádný' ;
dokument. getElementById ( 'pokračování3' ) . styl . Zobrazit = 'žádný' ;
}
funkce druhá ( ) {
dokument. getElementById ( 'pokračování2' ) . styl . Zobrazit = 'blok' ;
dokument. getElementById ( 'pokračování1' ) . styl . Zobrazit = 'žádný' ;
dokument. getElementById ( 'pokračování3' ) . styl . Zobrazit = 'žádný' ;
}
funkce třetí ( ) {
dokument. getElementById ( 'pokračování3' ) . styl . Zobrazit = 'blok' ;
dokument. getElementById ( 'pokračování1' ) . styl . Zobrazit = 'žádný' ;
dokument. getElementById ( 'pokračování2' ) . styl . Zobrazit = 'žádný'
}
skript >Výše uvedené řádky kódu:
- Definujte funkci s názvem „ První “.
- V této definici funkce je „ document.getElementById() ” přistupuje k prvku div, jehož id je “cont1” a aplikuje “ styl „nemovitost s „ blok “hodnota. Tato vlastnost zobrazí obsah karty, na kterou uživatel klikne.
- Dále „document.getElementById()“ přistupuje k jinému divu a aplikuje vlastnost „style“ s hodnotou „none“, aby ji skryla. Skryje tento prvek na webové stránce.
- Výše uvedená metoda se provádí pro další přístupné prvky div. Funkce „první“ totiž zobrazuje pouze obsah záložky, jejíž hodnota vlastnosti „styl“ je „blok“ a ostatní skryje.
- Výše uvedený postup se provádí pro další funkce „second()“ a „third()“.
Výstup
Je vidět, že karty jsou úspěšně vytvořeny a zobrazují svůj příslušný obsah po kliknutí uživatele.
Závěr
Chcete-li vytvořit karty, nejprve vytvořte jejich struktury pomocí „HTML“ a poté je přizpůsobte pomocí vlastností stylů CSS. Vlastnosti stylů jsou přidány bez exportu jakékoli další šablony stylů. Díky těmto vlastnostem jsou záložky atraktivní a poutavé. Jakmile jsou karty vytvořeny a přizpůsobeny, použijte programovací jazyk JavaScript a přidejte do nich funkce. Tato příručka prakticky vysvětlila celý postup vytváření karet pomocí CSS a JavaScriptu.