Edit in JSFiddle

$(document).ready(function() {
        $('.area:first').show();
    $('.tab li:first').addClass('active');

    var $tbl = $('.tab li');


    $tbl.click(function() {
        $tbl.removeClass('active');
        $(this).addClass('active');
        $('.area').hide();

    var $ath = $(this).find('a').attr('href');
        $($ath).slideDown('fast');
        return false;
    });
});

.tab, .tab li, .tab li a {
    float: left;
    padding:3px;
    margin-right:2px;
}

.content {
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {
    display: none;
}
.tab li.active {
    background: #eee;
}

.tab li.active a{
    color:red;
}

<ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
</ul>
<div class="content">
    <div class="area" id="tab1"> 
        Tab1<br />Tab1<br />Tab1<br />Tab1<br />
    </div>
    <div class="area" id="tab2">
       Tab2<br />Tab2<br />Tab2<br />Tab2<br />
    </div>
    <div class="area" id="tab3">
        Tab3<br />Tab3<br />Tab3<br />Tab3<br />
    </div>
    <div class="area" id="tab4">
        Tab4<br />Tab4<br />Tab4<br />Tab4<br />
    </div>
</div>