Edit in JSFiddle

$(document).ready(function() {
    var alltabs = $('div.tab'); 
    var tabs = $('#tabs');  
    
        alltabs.first().show();  
    tabs.find('li:first').addClass('over'); 
    tabs.find('a').live('click', function() {
        
        alltabs.hide()
            tabs.find('li').removeClass('over')
            $(this).parent().toggleClass('over')
                
    var tabref = $(this).attr('rel')
        $(tabref).fadeIn(300)
            this.blur()
    return false;
})
}); 

<ul id="tabs">
    <li><a rel="div.tab1" href="#">Tab 1</a></li>
    <li><a rel="div.tab2" href="#">Tab 2</a></li>
    <li><a rel="div.tab3" href="#">Tab 3</a></li>
    <li><a rel="div.tab4" href="#">Tab 4</a></li>
    <li><a rel="div.tab5" href="#">Tab 5</a></li>
</ul>
<div class="tab tab1">
<h2>Tab 1</h2>
タブ1

</div>
<div class="tab tab2">
<h2>Tab 2</h2>
タブ2

</div>
<div class="tab tab3">
<h2>Tab 3</h2>
タブ3

</div>
<div class="tab tab4">
<h2>Tab 4</h2>
タブ4
</div>
<div class="tab tab5">
<h2>Tab 5</h2>
タブ5

</div>

#tabs { width:100%;height:40px; }
#tabs li { float:left;margin-right:5px; }
#tabs li a {  display:block; padding:3px 6px; text-decoration:none;  }
#tabs li.over a { background:#222;color:#fff; } 
.tab { display:none; } 
.tab { border:1px solid #555;padding:15px; }