Loop Through Tabs

by Brett Miley

HTML

<li id="number-1" class="button">1</li>
<li id="number-2" class="button">2</li>
<li id="number-3" class="button">3</li>
<div class="content-1">Content 1</div>
<div class="content-2">Content 2</div>
<div class="content-3">Content 3</div>

CSS

div {
    padding:8px;
    background-color:#f3f3f3;
}
li {
    padding:8px;
    background-color:#f3f3f3;
}
.button {
    display:inline-block;
}
.active{background:black;}

JavaScript

jQuery('.button').each(function(i) {
        i++;
        jQuery('number-' + i).click(function() {
            jQuery(this).addClass('active');
            jQuery('.button').not(this).removeClass('active');
            jQuery('div').hide();
            jQuery('.content-' + i).show();
        });
        alert(i);
    });