HTML:
<div class="wrapper">
<div class="tabs">
<span class="tab">Вкладка 1</span>
<span class="tab">Вкладка 2</span>
<span class="tab">Вкладка 3</span>
</div>
<div class="tab-content">
<div class="tab-item">Содержимое 1</div>
<div class="tab-item">Содержимое 2</div>
<div class="tab-item">Содержимое 3</div>
</div>
</div>
jQuery:
$('.tab-item').not(':first').hide();
$('.wrapper .tab').on('click', function() {
$('.wrapper .tab').removeClass('active').eq($(this).index()).addClass('active');
$('.tab-item').hide().eq($(this).index()).fadeIn();
}).eq(0).addClass('active');
CSS:
.wrapper .active { color: red; }