<div>
<h3 class="active">最新の記事</h3>
<h3>コメント</h3>
<h3>人気記事</h3>
<ul class="active">
  <li>最新の記事</li>
  <li>最新の記事</li>
  <li>最新の記事</li>
</ul>
<ul>
  <li>コメント</li>
  <li>コメント</li>
  <li>コメント</li>
</ul>
<ul>
  <li>人気記事</li>
  <li>人気記事</li>
  <li>人気記事</li>
</ul>
</div>
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  width:360px;
}

h3 {
  background:#E3DECC;
  color:#333;
  cursor:pointer;
  float:left;
  margin:0;
  padding:10px;
  text-align:center;
  transition:all 0.5s;
  width:120px;
}
h3.active {
  background:#A18E5C;
  color:#fff;
  cursor:default;
}

ul {
  background:#A18E5C;
  clear:left;
  color:#fff;
  display:none;
  list-style:none;
  margin:0;
  padding:0;
}
ul.active {
  display:block;
}

li {
    border-bottom:1px solid #E3DECC;
    padding:10px;
}
$(function(){
  var $h3 = $('h3');
  $h3.click(function(){
    var $ind = $(this).index();
    $h3.removeClass('active').eq($ind).addClass('active');
    $('ul').removeClass('active').eq($ind).addClass('active');
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js