タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。

Result

jQuery

$(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')
    });
});

css

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;
}

HTML

<ul class=&quot;tab&quot;>
    <li class=&quot;active&quot;>TAB 1</li>
    <li>TAB 2</li>
    <li>TAB 3</li>
</ul>

<div class=&quot;tabContent active&quot;>This is the content of TAB 1.</div>
<div class=&quot;tabContent&quot;>This is the content of TAB 2.</div>
<div class=&quot;tabContent&quot;>This is the content of TAB 3.</div>

サンプルではタブを3つとしましたが、この方法であれば何個でも増やせます。記述は変わりません。