Jak samodzielnie stworzyć taby na stronę? CSS/jQuery

Kategoria wpisu JavaScript, jQuery, Kursy, PHP, HTML, CSS Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 3 minutes

Dzisiaj coś trochę z innej bajki ponieważ zajmę się tworzeniem tabów z pomocą jquery. Jak zapewne zauważyliście różne efekty staram się wykonywać głównie w HTML i CSS. Jednak nie zawsze to wystarczy by uzyskać porządny efekt. CSS od wersji 3 posiada olbrzymie możliwości i w wielu przypadkach z HTML 5 mogło by świetnie zastąpić skrypty JS – niestety jednak nie zawsze się da. W większość przypadków przyczyną jest niedostateczne dostosowanie przeglądarek internetowych lub inny sposób ich interpretacji.

Co to są taby i do czego służą?

O tabach pisałam już w kontekście omawiania Twiter Bootstrap 3 dlatego pozwólcie, że odeślę was to tego wpisu.

To co dokładnie będziemy budować możecie zobaczyć poniżej:

See the Pen Easy tabs by Aura (@Julka85) on CodePen.0

Zaczynamy budowę własnych tabów

Na początek musimy zbudować strukturę HTML naszych tabów. Na początek trzeba stworzyć kontener okalający całość a w nim 2 grupy – przyciski zmieniające karty, oraz same karty z zawartością.

W powyższym przykładzie skróciłam nieco tekst w tabach tak by lepiej było widać ich strukturę.

Za zmienianie tabów odpowiada poniższy kod:

Jak widać stworzyłam strukturę analogiczną do menu strony internetowej. Pominęłam jedynie linkowanie gdyż było ono zbędne. Dość istotne w tym kodzie są nazwy klas jakie posiadają ewenementy np.

class=”first active”

Nazwy tych klas odpowiadać będą kolejnym kartą.

A tak prezentują się same karty bez zawartości. Jak widać zostały one spięte z pomocą kontenera oraz posiadają jedną taką samą klasę (item).

Druga klasa odpowiada z kolei temu co widzieliśmy wcześniej w menu. Oczywiście w tej chwili z pewnością odezwą się głosy – to nie powinno być w ten sposób zrobione powinnaś użyć id. Być może tak 🙂 jednak dużo osób robi to na id wiec czemu nie na class.

W tej chwili nasze taby nie wyglądają za ciekawie. Właściwie to mamy wypunktowaną listę a pod nią tekst. Żeby to jakoś ogarnąć musimy skorzystać z CSS.

Formatujemy nasz tab

Poniżej znajdziecie kod CSS jaki stworzyłam do uzyskania efektu tabów

Po zastosowaniu tego kodu wasz tab powinien wyglądać jak ten (poza tłem pod tabem):

Nie będzie jednak działał. Po kliknięciu w menu nic się nie stanie. Aby uruchomić nasz kod musimy dodać odpowiedni skrypt.

Uruchamiamy działanie tabów

Teraz musimy dodać do naszej strony bibliotekę jQuery. Jeśli jest już ona dodana to nie musimy już tego robić.

Trochę objaśnień do powyższego kodu z pewnością wam nie zaszkodzi 🙂 .

Poniższy kod oznacza, że funkcja zostanie zrealizowana dopiero w tedy gdy klikniemy (.click) w obiekt li, którego element nadrzędny posiada klasę .menu.

$('.menu li').click(function()

Następnie przypisujemy nazwę klasy tego elementu do zmiennej values.

var values = $(this).attr('class');

Teraz ukrywamy z wszystkie element z klasą .item posiadające nadrzędny element z klasą .content.

$('.content .item').hide();

Teraz wyświetlimy/pokażemy elementy, które posiadają nazwę klasy zapisaną w zmiennej  values

$('.content .' + values).show();

Gotowe tabs możecie zobaczyć poniżej:

See the Pen Easy tabs by Aura (@Julka85) on CodePen.0

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *