Proste zakładki (taby)

W poniższym przykładzie postaramy się zbudować semantyczne taby.
Bez zbytniego przedłużania bierzemy się do pracy. Zaczynamy od kodu HTML:


<div class="tabs">
    <a href="#tab-1" class="active">Zakładka 1</a>
    <a href="#tab-2">Zakładka 2</a>
    <a href="#tab-3">Zakładka 3</a>
</div>

<div class="tabs-container">
    <article id="tab-1" class="tab-content active">
        <h3>Treść pierwszej zakładki</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...
    </article>
    <article id="tab-2" class="tab-content">
        <h3>Treść drugiej zakładki</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...
    </article>
    <article id="tab-3" class="tab-content">
        <h3>Treść trzeciej zakładki</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...
    </article>
</div>

Treść pierwszej zakładki

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...

Treść drugiej zakładki

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...

Treść trzeciej zakładki

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque fugit itaque modi necessitatibus pariatur...

Jak widzisz, jest to zwykła lista linków (kotwic), które przenoszą do odpowiedniej części na stronie. Żadna idea.
Sam wygląd zakładkom nadamy za pomocą CSS, ale zanim to zrobimy zajmijmy się skryptami.

Pisanie skryptów zaczynamy od załączenia do naszego kodu biblioteki jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Następnie piszemy kod obsługi zakładek:


$(function() {
    //dla każdego kontenera z treścią tabów dodajemy klasę js -> patrz dalej
    $('.tabs-container').addClass('js');

    $('.tabs').each(function() {
        var $a = $ul.find('a'); //pobieram wszystkie linki-zakładki

        //po kliknięciu na link...
        $a.on('click', function(e) {
            //podstawiamy pod zmienną $this kliknięty link
            var $this = $(this);

            //pobieramy href klikniętego linka
            var href = $this.attr('href');
            //pobieramy treść na którą wskazuje link
            var $target = $(href);

            //jeżeli ta treść w ogóle istnieje...
            if ($target.length) {
                e.preventDefault(); //przerwij domyślną czynność jeżeli istnieje zawartość zakładki - inaczej niech dziala jak link
                //usuwamy z sąsiednich linków klasę active
                $this.siblings('a').removeClass('active');
                //klikniętemu linkowi dajemy klasę active
                $this.addClass('active');

                //podobne działanie robimy dla treści tabów
                $target.siblings('.tab-content').removeClass('active');
                $target.addClass('active');
            }
        });
    });
});

Pierwszą rzeczą jaką robimy to nadanie dla treści dodatkowej klasy .js. Po co?
Jak widzisz w przykładzie HTML powyżej kolejne treści zakładek układają się standardowo jedna pod drugą. To wielka wygoda dla masochistów, którzy wyłączają JS (albo mają popsute przeglądarki).
Jeżeli nasz skrypt zadziała, chcemy by treści zakładek były domyślnie ukryte (display:none), a wyświetlana była tylko treść aktywnej zakładki. .tab-content.active (display:block).

Po kliknięciu na link pobieramy jego atrybut href, a następnie na jego podstawie element na który wskazuje. Mając ten elemenent możemy mu ustawić klasę .active, a wszystkim jego sąsiadom (siblings) możemy usunąć tą klasę. Podobne działanie wykonujemy dla klikniętego linka, czyli ustawiamy mu klasę .active, a jego sąsiadom ją usuwamy. Spraw tak prosta, że chyba zmarnowałem wasz czas.


/* ---- treść zakładki ---- */
.tabs {
    list-style-type: none;
    margin: 5px 0 0 0;
    padding: 0;
    clear: both;
    padding-bottom: 10px;
    overflow: hidden;
}
.tabs a {
    width: 20%;
    display: inline-block;
    height: 3em;
    margin:2px;
    background: #eee;
    font-size: 1em;
    font-weight: bold;
    line-height: 3em;
    text-decoration: none;
    color: #333;
    text-align: center;
}
.tabs a.active {
    background: #EC185D;
    color:#fff;
}

/* ---- treść zakładek ---- */
.tabs-container {
}
.tabs-container .tab-content {
}

.tabs-container.js .tab-content {
    display: none;
    padding:1em;
    font-size:2em;
    background: #eee;
    border-radius:2px;
}
.tabs-container.js .tab-content.active {
    display: block;
}

i w zasadzie nasze zakładki są gotowe do użycia.

Treść pierwszej zakładki

Przykładowa treść pierwszej zakładki

Treść drugiej zakładki

Przykładowa treść drugiej zakładki

Treść trzeciej zakładki

Przykładowa treść trzeciej zakładki