タブメニューを作ってみよう

完成サンプル

タブ1です。
タブ2です。
タブ3です。

使っているメソッド

.removeClass(); => 指定した要素のクラスを削除する。
.addClass(); => 指定した要素にクラスを追加する。
.hide(); => 指定した要素を非表示にする。
.fadeToggle(); => 指定した要素をフェードアウトしたり、フェードインさせる。

html部分 
    <html>
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="./css/style.css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
        <div class="tab">
          <ul>
            <li><a name="#tab1" class="active">タブ1</a></li>
            <li><a name="#tab2">タブ2</a></li>
            <li><a name="#tab3">タブ3</a></li>
          </ul>

          <div class="tab-box">
            <div id="tab1">タブ1です。</div>
            <div id="tab2">タブ2です。</div>
            <div id="tab3">タブ3です。</div>
          </div>
        </div>
       </body>
    </html>
css部分 
    .tab ul{
      list-style: none;
    }

    .tab li{
      float: left;
      border-radius: 10px 10px 0 0;
    }

    .tab li + li{
      border-left: solid 1px #ccc;
    }

    .tab li a{
      display: block;
      color: #fff;
      cursor: pointer;
      text-align: center;
      width: 130px;
      height: 40px;
      line-height: 40px;
      border-radius: 10px 10px 0 0;
      background: #5DB67A;
    }

    .tab li .active{
      background: #3B8151;
    }

    .tab li a:hover{
      text-decoration: none;
    }

    .tab-box{
      clear: both;
    }

    .tab-box div{
      display: none;
      width: 392px;
      height: 200px;
      background: #DDEEE3;
    }

    #tab1{
      display: block;
    }
jQuery部分 
    $(function(){
      $(".tab li a").click(function(){
        $(".tab li a").removeClass("active");
        $(this).addClass("active");
        $(".tab-box div").hide();
        $($(this).attr("name")).fadeToggle();
      });
    });

簡単な解説

流れとしては、
1.タブがクリックされる
2.タブの色を変えるクラスを一旦すべての要素から削除
3.クリックされた要素にだけ、色を変えるクラスを追加
4.tab-boxのdivをすべて非表示に
5.クリックされたタブのname属性と同じidを持つ要素を表示する
といった感じです。