JavaScript - framework jQuery - menu zakładki

Kod:

Ewentualne Objaśnienia:

Tutaj przedstawiam prosty kod, który odpowiedzialny jest za funkcjonowania menu zakładkowego na stronie www.szukajkamp3.pl . W takich przykładach należy pamiętać o odpowiednim ustawienia elementów w CSS - tutaj ustawiłem odpowiednio linki (a) jako bloki, gdzie tłem jest obrazek zakładki, oraz wyświetlanie "de lewej" [ float:left; ]. Również dla takiego linku ustawiamy w CSS inne tło (czyli inny obrazek zakładki) po najechaniu myszką - czyli wiadomo a:hover { } . Również napisałem sobie klasę "current", która odpowiada za stan danej zakładki po kliknięciu na niej (czyli jak jest aktywna). Te nasze linki mieszczą się w DIVie o id "menu_div_zakladki" (nie pytajcie skąd wziąłem te nazwy xD) natomiast nasze poszczególne zawartości zakładek w DIVie o id "menu_div_zmienne" [ w tym elemencie każda zakładka - zawartość w jeszcze jednym elemencie div ] . No i wiadomo, że ten DIV jest standardowo ustawiony na niewidoczność.
Generalnie mamy tutaj dwie nowe rzeczy :
- index - pozwala nam określić, który z kolei jest jakiś element w jakimś [masło maślane] czyli np., którym linkiem z kolei jest jakiś wybrany w pewnym elemencie nadrzędnym
- eq - pozwala odnieść się do jakiegoś elementu (w innym) o określonym numerze

tak więc :
- na początku chcemy żeby pierwsza zakładka (czyli ta z indeksem 0) po załadowaniu strony się pojawiała więc dla DIV o klasie "menu_div_zmienne" szukamy (wewnątrz niego) pierwszego DIV [odniesienie przez eq(0)] oraz pokazujemy go przez show
- aby użytkownik wiedział, że to akurat ta zakładka jest zaznaczona, należy jej nadać klasę "current" - więc analogicznie jak wyżej odnosimy się do pierwszego linku i nadajemy mu odpowiednią klasę [odpowiednio przygotowaną w CSS]
- następnie mamy funkcję, która mówi nam co ma się dział w momencie kliknięcia na jedną z zakładek (można zmienić np. na najechanie myszką) :
    - sprawdzamy, którą z kolei zakładkę kliknięto przez wspomnianą funkcję index
    - usuwamy klasę "current" z wcześniej zaznaczonej (klikniętej) zakładki
    - naszej właśnie klikniętej zakładce nadajemy tę klasę
    - w div o id "menu_div_zmienne" ukrywamy elementy DIV, która aktualnie są widoczne (będzie to w tym przypadku tylko 1)
    - przez funkcję show pokazujemy div o konkretnym numerze - czyli jeśli klikamy 3 zakładkę to odkrywa się 3 div [ pamiętaj o numeracji od 0 ]

Również warto prześledzić http://ferrante.pl/2008/03/24/jquery-to-latwe-5-zakladki/ .