Edit in JSFiddle

$(function() {
    $(".tab li").click(function() {
        var num = $(".tab li").index(this);
        $(".tabContent").removeClass('active');
        $(".tabContent").eq(num).addClass('active');
        $(".tab li").removeClass('active');
        $(this).addClass('active')
    });
});

<ul class="tab">
    <li class="active">TAB 1</li>
    <li>TAB 2</li>
    <li>TAB 3</li>
</ul>

<div class="tabContent active">TAB 1の内容がココに入ります.</div>
<div class="tabContent">TAB 2の内容がココに入ります.</div>
<div class="tabContent">TAB 3の内容がココに入ります.</div>

ul.tab {
    list-style: none;
}
ul.tab li {
    float: left;
    margin-right: 10px;
    padding: 10px;
    background-color: #f2f2f2;
    color: #666;
    cursor: pointer;
}
ul.tab li:hover {
    color: #FF0000;
}
ul.tab li.active {
    background-color: #999;
    color: #fff;
}
div.tabContent {
    clear: both;
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
    display: none;
}
div.active {
    display: block;
}