W poprzedniej części omawiałem animacje, tym razem przyszedł czas na prosty skrypt zakładek napisany w JQuery. W poprzednich częściach omawiałem obsługę zdarzeń i kilka funkcji, które w zupełności wystarczają do napisania takiego skryptu.

Pisanie skryptów w JQuery powinniśmy zacząć od poprawnej struktury kodu HTML. W zakładkach będziemy potrzebować elementów, które możemy kilknąć by przejść do innej zakładki oraz treści zakładek.

<nav>
    <a href="#tab1">zakladka 1</a>
    <a href="#tab2">zakladka 2</a>
    <a href="#tab3">zakladka 3</a>
</nav>
<div class="tab" id="tab1">
    zakładka pierwsza
</div>
<div class="tab" id="tab2">
    zakładka druga
</div>
<div class="tab" id="tab3">
    zakładka trzecia
</div>

Zwróć uwagę na co wskazują linki. Są to odpowiednie zakładki odnośnik

<a href="#tab1">

wzkazuje na element z id=”tab1″ analogicznie inne linki wskazują na kolejne zakładki.

Kolejną istotną rzeczą jest napisanie stylów, które nadadzą wygląd zakładkom.

nav
{
    float:left;
    width:300px;
    height:30px;
    clear:both;
    position:relative;
    text-align:center;
}

nav > a
{
    float:left;
    width:90px;
    height:inherit;
    border:1px solid black;
    text-decoration:none;
    z-index:5;
    top:1px;
    background-color:white;
}
div.tab
{ 
   float:left;
   width:400px;
   height:200px;
   padding:10px;
   border: 1px solid black; 
   display:none;
}
nav a.active
{
    border-bottom:none; 
}

Style są dość proste. Jedyną rzeczą, na którą warto zwrócić uwagę jest znacznik „>”, który oznacza bezpośredniego potomka elementu.

Po stylowaniu należy zabrać się za kod JQuery.

$(function (){
    //obsluga zdarzenia click
    $("nav > a").click(function (ev){
        //blokada domyslnej akcji zdarzenia click
        ev.preventDefault();
        //usuniecie klasy active z wszystkich linkow
        $("nav > a").removeClass('active');
        //dodanie klasy active do linku ktory zostal klikniety
        $(this).addClass('active');
        //pobranie z linku ktory zostal klikniety atrybutu href i pobranie tego elementu na ktory href wskazuje
        var $zakladka = $($(this).attr('href')); 
        //ukrycie wszystkich zakladek
        $("div.tab").hide();
        //pokazanie poprawnej zakladki 
        $zakladka.show();

    });

    //wywolanie zdarzenia click dla pierwszego elementu
    $("nav > a").first().click();
});

I to tyle jeśli chodzi o prosty skrypt zakładek. Jak widzisz skorzystanie z kilku lini kodu JQuery może dać fajny efekt.

Działający skrypt możecie zobaczyć tutaj