<style type="text/css">
.tabs{
font: normal normal 400 16px/normal Verdana;
position:relative;
display:inline-block;
margin-top:15px;
}
.tabs>span{
font: normal normal 400 13px/normal Verdana;
float:left;
cursor:pointer;
margin-right:2px;
display:block;
border:#000 solid 1px;
paddung:0 4px;
}
.tabs>span.selected{
background:black;
color:white;
}

.tab{
margin-top:2px;
display:block;
width:489px;
}

.tab-content{
display:none;
padding:6px 10px;
background:black;
color:white;
width: auto%;
/*height: 100px;*/
overflow-y:auto;
overflow-x:hidden; 
}
</style>

Повторяемый код в описанинии форумов - колво вкладок - неограничено

<ul class="tabs"><!-- Tabs<br> <br>-->
<span>Баллы в подарок</span><span>Обновление</span><span>Новые возможности</span><br>
<li class="tab">
    <div class="tab-content">
За регистрацию на форуме вы получаете 10 кристаллов
    </div>
</li>
<li class="tab">
    <div class="tab-content">
     Обновление
   </div>
</li>
<li class="tab">
    <div class="tab-content">
     Новые возможности
    </div>
</li>
<li class="tab">
    <div class="tab-content">
     третья вкладка
    </div>
</li>
</ul><!-- //End Tabs -->

В HTML низ

Код:

<script type="text/javascript">
$(document).ready(function(){
   $('.tabs').each(function(){
        var a = $(this);
        a.children().children('.tab-content:first').show(0);
        a.children('span:first').addClass('selected');
   });
    $('.tabs>span').click(function(){
       var a = $(this).parents('.tabs');
       var arr = a.children('span');
       var index = arr.index(this);
       arr.removeClass('selected');
       $(this).addClass('selected'); 
       a.children().children('.tab-content').hide(0);   
       a.children().children('.tab-content').eq(index).show(0);     
    });
});
</script>