Here is the simple code, implemented,tested and working

also see in action here, http://jsfiddle.net/TJfYf/1/

in html,

<div id="tab-wrapper">
        <ul class="tabs">
            <li><a class="defaulttab active" rel="tabs1">Tab1</a></li>
            <li><a rel="tabs2">Tab2</a></li>
            <li><a rel="tabs3">Tab3</a></li>
        </ul>
        <div class="tab-content" id="tabs1">Tab1</div>
        <div class="tab-content" id="tabs2">Tab2</div>
        <div class="tab-content" id="tabs3">Tab3</div>
</div>

in css,

ul.tabs li {display:block;float:left;position: relative;z-index: 0}
ul.tabs li a {padding:12px 10px;display:block;float:left;background-color:#fff;border: 1px solid silver;}
ul.tabs li a.active {background: #d2d2d2}
.tab-content {width: 300px;height: 200px;clear:both;border: 1px solid silver;position: relative;z-index: 1;background: #fff;} 

in javascript, (dont forget to include jquery.js)

$(document).ready(function(){
    switch_tabs($('.defaulttab'));
    $('.tabs a').click(function() {
        switch_tabs($(this));
    });    
});
function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("active");
    var id = obj.attr("rel");

    $('#' + id).show();
    obj.addClass("active");
}