css

style.css

.nav {
    width: 100%;
    max-width: 600px;
    height : 50px;
    margin: 0 auto;
}
.nav > li {
    list-style: none;
    float: left;
    width: 33.333%;
    background-color: #CCC;
    text-align: center;
    line-height: 50px;
    color: #FFF;
    font-size: 20px;
    border-right: 2px #FFF solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.nav > li:last-child {
    border-right: none;
}
.is-hidden {
    display: none;
}
.contents {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    border: 2px #CCC solid;
    border-top: none;
}
.contents > li {
    list-style: none;
}

html,jQuery

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <ul class="nav">
        <li>HOME</li>
        <li>NEWS</li>
        <li>MYPAGE</li>
    </ul>
    <ul class="contents">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
        <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。
// .index() 要素のindexを取得。
// .eq() 引数に応じたindexの要素を指定。
// .addClass() クラスを追加。
// .removeClass() クラスを削除。
$(function(){
  $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート
    var num = $(this).index();//navクラスのliのインデックス番号を取得
    $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする
    $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、
//contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる
  })
});
</script>
</body>
</html>