Toepassing 2: tabbladen

Tabbladen worden vaak gebruikt op pagina's die zeer veel informatie bevatten. U kan de informatie mooi in blokken onderverdelen en via verschillende tabs de juiste data tonen of verbergen.

★ Open animaties/toep_tabs.html en bekijk de HTML-code.

<ul class="tabNav">
    <li><a href="#!" class="active">Section 1</a></li>
    <li><a href="#!">Section 2</a></li>
    <li><a href="#!">Section 3</a></li>
    <li><a href="#!">Section 4</a></li>
</ul>
....
<section class="message-bar background-gray-light">
    <h2>Section 1</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 2</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 3</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 4</h2>
    <div>...</div>
</section>

De navigatie is opgebouwd via een lijst met (dummy) links. Vanuit CSS worden de links horizontaal geplaatst en, afhankelijk van de toestand, krijgt de tab een andere achtergrondkleur.

In normale toestand is de achtergrondkleur van een tab lichtblauw en in de hover toestand is de achtergrond donkerrood.

Telkens men op een link klikt, komt de tab in zijn actieve toestand. Nu wordt de kleur grijs. De actieve toestand vindt u in de class .active.

Bij elke link hoort natuurlijk ook een datablok. Hiervoor gebruiken we een section-tag. De volgorde van de li-tags bepaalt welke section-tags zichtbaar/onzichtbaar worden. De eerste link-tag toont de eerste section-tag, de tweede link toont de tweede section-tag, enz...

We gaan het script zo universeel mogelijk opbouwen. Als u later een extra link en een extra section-tag toevoegt, moet dit automatisch als tabblad functioneren.

★ Pas het script als volgt aan:

<style>
    main > section:not(:first-of-type) {
        display: none;
    }
    ...
</style>

Eerst gaan we, vanuit css, alle section-tags, behalve de eerste, verbergen.

★ Test het resultaat in een browser. ★ Voeg nu het click-event toe.

$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        $('section:visible').hide();
        $('section:eq(' + index + ')').show();
    });
});

De navigatie bevat voorlopig vier links. Om te achterhalen welke link er werd aangeklikt, maken we gebruik van de methode index(). De selector $('.tabNav a') komt viermaal voor op de pagina. Voor de eerste link is $('.tabNav a').index(this) gelijk aan 0, voor de tweede link is dit 1, enz... De index van de geklikte link, bewaren we in de variabele index.

Vervolgens verwijderen we de reeds aanwezige class .active en voegen de class via $(this).addClass('active') opnieuw toe aan de geklikte link.

De variabele index hebben we nodig voor de section-tags. Eerst verbergen we alle section-tags om vervolgens de juiste section-tag te tonen. Voor de derde link wordt dit: $('section:eq(2)').show();

★ Test het resultaat in een browser.

De tabnavigatie is in principe klaar, maar we gaan nog even een animatie toevoegen.

★ Vervang de twee laatste lijnen uit het click-event door deze code:

$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        $('section:visible').slideUp(function(){
            $('section:eq(' + index + ')').slideDown();
        });
    });
});

Met een slide-effect verdwijnt de zichtbare section-tag. Zodra het effect is afgerond, wordt de nieuwe data zichtbaar.

★ Test het resultaat in een browser. ★ Klik tweemaal na elkaar op hetzelfde tabblad.

De data verdwijnt en wordt vervolgens terug zichtbaar. We willen het slide-effect enkel als we op een ander tabblad klikken. Als we op het reeds actieve tabblad klikken, mag er helemaal niets gebeuren.

★ Plaats een if-voorwaarde rond het slide-effect.

$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        if ($('section:eq(' + index + ')').is(':hidden')) {
            $('section:visible').slideUp(function(){
                $('section:eq(' + index + ')').slideDown();
            });
        }    
    });
});

★ Bewaar de pagina en test het resultaat in een browser. ★ Voeg ook eens een vijfde link en een vijfde section-tag toe.