Jak tworzyć karty za pomocą CSS i JavaScript?

HTML” zakładki ” to bloki przechowujące zawartość witryny internetowej w fragmentach. Służą one do wyświetlania przechowywanej zawartości przy użyciu różnych metod, takich jak kliknięcie myszą, dwukrotne kliknięcie, najechanie myszką i wiele innych. Karty zapewniają najprostszy sposób poruszania się po różnych stronach witryny internetowej. Dodatkowo pomagają także zagospodarować przestrzeń oraz uatrakcyjnić i przykuć uwagę witryny.

W tym przewodniku wyjaśniono, jak tworzyć karty za pomocą CSS i JavaScript.

Jak tworzyć karty za pomocą CSS i JavaScript?

W tej sekcji znajdują się instrukcje krok po kroku dotyczące tworzenia zakładek za pomocą CSS i JavaScript.

Krok 1: Utwórz strukturę zakładek przy użyciu HTML

Najpierw spójrz na kod HTML, który tworzy strukturę kart HTML:

< identyfikator działu = „karta 1” na kliknięcie = 'Pierwszy()' > Dom div >

< identyfikator działu = „karta 2” na kliknięcie = 'drugi();' > O div >

< identyfikator działu = „karta 3” na kliknięcie = 'trzeci();' > Skontaktuj się z nami div >

< br />

< identyfikator działu = „kontynuacja 1” > Witamy w Linuxhincie ! div >

< identyfikator działu = „kontynuacja 2” > EDUKACJA TECHNOLOGICZNA

Stworzyliśmy wiele produktów, które pomogą Ci poznać Linuksa, programowanie, informatykę i nie tylko.

div >

< identyfikator działu = „kontynuacja 3” >

Możesz skontaktować się z naszym zespołem pod adresem Editor AT linuxhint DOT com.

div >

W powyższych liniach kodu:

„
” dodaje element div o identyfikatorze „tab1” i dołączonym „ na kliknięcie ” zdarzenie, aby wykonać połączone „ Pierwszy() ” działa po kliknięciu. Ten element pełni rolę karty HTML.
Powyższa metoda jest wykonywana dla kolejnych dwóch elementów div.
„
” dodaje podział wiersza.
„
” ponownie wstawia element div posiadający przypisany identyfikator „cont1”. Element ten pokazuje w bloku zawartość utworzonej zakładki.
Następne dwa”
” Tagi dodają także elementy div z przypisanymi im identyfikatorami.

Krok 2: Stylizuj karty za pomocą CSS

Teraz zastosuj właściwości stylizacji CSS, aby dostosować karty i ich zawartość zgodnie z własnym wyborem:

< styl >

#tab1, #tab2, #tab3 {

platforma : lewy ;

wyściółka : 5 pikseli 10 pikseli 5 pikseli 10 pikseli ;

tło : pomarańczowy czerwony ;

kolor : #FFFFFF ;

margines : 0px 5px 0px 5px ;

kursor : wskaźnik ;

granica - promień : 3 piks ;

}

#zakładka1 : najedź kursorem, #tab2 : najedź kursorem, #tab3 : unosić się {

tło : zielony ;

}

#kont1, #kont2, #kont3 {

szerokość : 300 pikseli ;

wysokość : 100 pikseli ;

wyściółka : 40 pikseli ;

czcionka - rozmiar : średni ;

czcionka - rodzina : 'Czcionka Times New Roman' , Times, szeryf ;

granica : 2px jednolity pomarańczowo-czerwony ;

granica - promień : 7 pikseli ;

wyświetlacz : nic ;

}

styl >

W podanym fragmencie kodu:

Po pierwsze, uzyskaj dostęp do „ zakładki ” używając przypisanych im identyfikatorów i dostosuj je za pomocą następujących właściwości stylu (float, padding, tło, kolor, margines: 0px 5px 0px 5px, kursor i promień obramowania).
Następnie dołącz „ unosić się ” z zakładkami umożliwiającymi zmianę koloru tła po najechaniu na nie myszką użytkownika.
Następnie przejdź do „ zawartość zakładek ” przechowywane w elementach div, których identyfikatory to „cont1”, „cont2” i „cont3”. Teraz zastosuj do nich następujące właściwości stylu (szerokość, wysokość, dopełnienie, rozmiar czcionki, rodzina czcionek, obramowanie, promień obramowania i wyświetlanie).

Krok 3: Dodaj funkcje do zakładek za pomocą JavaScript

Na koniec dodaj funkcjonalności do utworzonych zakładek za pomocą JavaScript:

< scenariusz >

najpierw działać ( ) {

dokument. pobierzElementById ( „kontynuacja 1” ) . styl . wyświetlacz = 'blok' ;

dokument. pobierzElementById ( „kontynuacja 2” ) . styl . wyświetlacz = 'nic' ;

dokument. pobierzElementById ( „kontynuacja 3” ) . styl . wyświetlacz = 'nic' ;

}

funkcja druga ( ) {

dokument. pobierzElementById ( „kontynuacja 2” ) . styl . wyświetlacz = 'blok' ;

dokument. pobierzElementById ( „kontynuacja 1” ) . styl . wyświetlacz = 'nic' ;

dokument. pobierzElementById ( „kontynuacja 3” ) . styl . wyświetlacz = 'nic' ;

}

funkcja trzecia ( ) {

dokument. pobierzElementById ( „kontynuacja 3” ) . styl . wyświetlacz = 'blok' ;

dokument. pobierzElementById ( „kontynuacja 1” ) . styl . wyświetlacz = 'nic' ;

dokument. pobierzElementById ( „kontynuacja 2” ) . styl . wyświetlacz = 'nic'

}

scenariusz >

Powyższe linie kodu:

Zdefiniuj funkcję o nazwie „ Pierwszy ”.
W tej definicji funkcji, „ dokument.getElementById() ” uzyskuje dostęp do elementu div, którego identyfikator to „cont1” i stosuje metodę „ styl ”nieruchomość z” blok wartość na tym. Właściwość ta wyświetli zawartość zakładki, na którą użytkownik kliknie.
Następnie funkcja „document.getElementById()” uzyskuje dostęp do innego elementu div i stosuje właściwość „style” o wartości „none”, aby ją ukryć. Ukryje ten element na stronie internetowej.
Powyższa metoda jest wykonywana dla kolejnych dostępnych elementów div. Dzieje się tak dlatego, że funkcja „pierwsza” wyświetla tylko zawartość zakładki, której wartość właściwości „styl” to „blok” i ukrywa pozostałe.
Powyższa procedura jest wykonywana dla kolejnych funkcji „sekunda()” i „trzecia()”.

Wyjście

Można zauważyć, że karty zostały pomyślnie utworzone i wyświetlają odpowiednią zawartość po kliknięciu przez użytkownika.

Wniosek

Aby utworzyć zakładki, najpierw zbuduj ich strukturę za pomocą „HTML”, a następnie dostosuj je za pomocą właściwości stylizacji CSS. Właściwości stylizacji są dodawane bez eksportowania dodatkowego arkusza stylów. Te właściwości sprawiają, że zakładki są atrakcyjne i przyciągają wzrok. Po utworzeniu i dostosowaniu kart użyj języka programowania JavaScript, aby dodać do nich funkcje. W tym przewodniku praktycznie wyjaśniono całą procedurę tworzenia zakładek za pomocą CSS i JavaScript.

Jak tworzyć karty za pomocą CSS i JavaScript?