jQuery - Tabbladen


Met regelmaat kom je op website tabbladen tegen en deze zijn eenvoudig te maken met jQuery. Hoewel er diverse scripts op internet zijn te vinden om tabbladen te maken hieronder een simpele uitvoering om hetzelfde te bereiken inclusief de HTML code en de CSS. Je kunt uiteraard de opmaak verder naar eigen smaak aanpassen, onderaan deze pagina zie je een werkende demo van de tabbladen met aanvullende opmaak toegepast.

CSS

div.tab-container {
        float:left;
        width:493px;
        padding:20px;
}
div.nav {
        position:relative;
        float:left;
        width:493px;
        height:30px;
}
div.nav ul li {
        float:left;
        width:125px;
        height:30px;
        margin:0px 0px 0px 0px;
        padding:5px 0px 0px 0px;
        border:1px solid #999;
        background-color:#fff;
        cursor:hand;
        cursor:pointer;
        text-align:center;
}
div.nav ul li.active {
        color:#FF6600;
}
div.tabs {
        position:relative;
        float:left;
        width:493px;
        height:185px;
        background-color:#FFF;
        border:1px solid #999;
}
div.tabs div {
        position:absolute;
        display:none;
        width:473px;
        height:185px;
        padding:10px;
}


HTML

In de code wordt het attribuut 'rel' gebruikt en dit heeft te maken met Internet Explorer 7. Als je niet geeft om deze oudere browser zou je uiteraard ook prima ID's kunnen gebruiken.

<div class="tab-container">
        <div class="nav nav-top">
                <ul>
                        <li rel="tabone">Lorem</li>
                        <li rel="tabtwo">Ipsum</li>
                        <li rel="tabthree">Libero</li>
                </ul>
        </div>
        <div class="tabs">
                <div class="tabone">Tab 1</div>
                <div class="tabtwo">Tab 2</div>
                <div class="tabthree">Tab 3</div>
        </div>
</div>


jQuery

In de code wordt er een classnaam 'active' toegekend aan de navigatie (selected state).

$(document).ready(function() {
        $('div.tabs div').hide();
        $('div.tabs div:first').show();
        $('div.nav ul li:first').addClass('active');

        $('div.nav ul li').click(function(){
                var current = $(this).attr('rel');

                $('div.nav ul li').removeClass('active').addClass('in-active');
                $('div.nav ul li[rel="'+current+'"]').removeClass('in-active').addClass('active');

                $('div.tabs div').fadeOut('fast');
                $('div.tabs div.' + current).fadeIn('fast');
        });
});

Demo

Hieronder een demo van de tabbladen.

  • Lorem
  • Ipsum
  • Libero

Tab 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque

Tab 2

Pellentesque feugiat, metus non tincidunt mattis, magna elit venenatis libero, eleifend vulputate pede pede id nisi. Sed ac neque. Sed id justo ac mauris fringilla congue. Suspendisse potenti. Aenean dictum, nulla eget pharetra tempor, arcu nisi luctus metus, quis pharetra nisl magna ac diam. Sed adipiscing nonummy nunc. Mauris nec enim eget ligula tempor scelerisque. Mauris facilisis malesuada nulla. Praesent bibendum sapien euismod elit pharetra lacinia. Maecenas tincidunt erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Tab 3

Ut lectus justo, gravida in, bibendum eget, ornare in, nibh. Mauris sit amet tellus a dui pulvinar faucibus. Vivamus pretium, turpis et dapibus rutrum, pede nisl tempor lectus, id consequat eros felis ac dui. Ut viverra, ante ac cursus egestas, enim elit auctor risus, sed rhoncus quam quam et diam. Suspendisse potenti.