Edit in JSFiddle

<ul class="tab">
    <li><a href="#tab1">新着記事</a></li>
    <li><a href="#tab2">カテゴリ</a></li>
    <li><a href="#tab3">ランダム</a></li>
</ul>
<div class="tab_content">
    <div class="tab_area" id="tab1">新着記事の中身</div>
    <div class="tab_area" id="tab2">カテゴリの中身</div>
    <div class="tab_area" id="tab3">ランダムの中身</div>
</div>

.tab {
    list-style-type: none;
}
.tab li { /*タブ部分*/
	float: left;
	margin: 0 2px;
	padding: 3px 7px;
	background: #fbd594;
	}
.tab li.active { /*選択中のタブ*/
	background: #c9c9c9;
    }
.tab_area { /*切り替え部分非表示*/
    display: none;
    }
.tab_content { /*内容*/
    clear: both;
    width: 300px;
    border: 1px solid #999;
	padding: 20px;
    }

(function($) {
    $(document).ready(function() {
        $('.tab_area:first').show();
        $('.tab li:first').addClass('active');
  
        $('.tab li').click(function() {
            $('.tab li').removeClass('active');
            $(this).addClass('active');
            $('.tab_area').hide();
  
            $(jQuery(this).find('a').attr('href')).fadeIn();
            return false;
        });
    });
})(jQuery);