jQuery Tabs

jQuery Tabs

Reiternavigation mit jQuery

Durch Klicken auf die Reiter der Tab-Navigation oder auf weiter/zurück wechselt der Inhalt. Der jeweils aktive Reiter erhält die CSS-Klasse „active“. Reiter- und Contentanzahl müssen gleich sein. Der Content wechselt indem der sichtbare Inhalt ausgeblendet wird und der Inhalt der gleichen Position des Reiters eingeblendet wird.

Beispiel

  • Tab
  • Tab
  • Tab
1

Beispiel mit weiter / zurück

  • Tab
  • Tab
  • Tab
1

Beispiel automatischer Reiterwechsel

  • Tab
  • Tab
  • Tab
1

Die Reiter werden automatische gewechselt. Bei mouseover pausiert der Reiterwechsel. Die CSS-Klasse rotation wird in diesem Beispiel verwendet.

Struktur

<div class="reiterteaser"><!-- " rotation" für automatischen Wechsel hinzufügen -->
    <ul class="tabs">
        <li class="active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div class="content">
        <div class="box">Inhalt 1</div>
        <div class="box" style="display: none;">Inhalt 2</div>
        <div class="box" style="display: none;">Inhalt 3</div>
    </div>
    <div class="next">&rang;</div><div class="prev">&lang;</div>
</div>

JavaScript

<script type="text/javascript">
var tabs = ".tabs li";
var activeclass = "active";

$(function() {
    $(tabs).click( /* statt "click" kann auch "hover" verwendet werden */
        function () {
            $(this).siblings().removeClass(activeclass);
            $(this).addClass(activeclass);
            $(this).parent().next(".content").find(".box").hide().eq($(this).index()).show();
        }
    );

    /* weiter/zurück Navigation */
    $(".next, .prev").click(
        function () {
            var el = $(this).parent().find(tabs);
            var current = $(el).closest("." + activeclass).index();
            var first = el.first().index();
            var all = el.last().index();

            direction = false;
            if($(this).hasClass("next")) { direction = true; }
            if(direction) { current++; } else { current--; }
            if(current < 0) { current = all; }
            if(current > all) { current = first; }

            el.eq(current).click();
        }
    );
});

/* automatische Rotation */
var rotation = null;
var rotationspeed = 2000;
var rotationclass = "rotation";

function autorotation() {
    var teaser_rotation = $("." + rotationclass + " " + tabs);
    var rotationcurrent = $("." + rotationclass + " " + tabs + "." + activeclass).index();

    if (rotationcurrent + 1 == $(teaser_rotation).length) { rotationcurrent = 0; } else { rotationcurrent++; }
    $(teaser_rotation).eq(rotationcurrent).click();
}
$(function() {
    rotation = window.setInterval("autorotation()", rotationspeed);
    $("." + rotationclass).hover(function () {
        window.clearInterval(rotation);
    }, function () {
        rotation = window.setInterval("autorotation()", rotationspeed);
    });
    $("." + rotationclass).mouseover(function() {
        window.clearInterval(rotation);
    });
});
</script>
Impressum