ソース見てませんが、この程度のものであれば、CSSだけでできますよ。
基本的には、初期表示の要素以外は隠しておいて、ボタンによってdisplayの値を切り替えるだけです。
切り替えの方法は、javascript使ってもいいですし、cssだけでもできます。
たとえばjqueryを使うならこんな感じ。
--------------HTML
<nav>
<ul>
<li data-target="content1">menu 1</li>
<li data-target="conetnt2">menu 2</li>
<li data-target="content3">menu 3</li>
</ul>
</nav>
<article >
<div id="content1" class="content show">
<h1>content1</h1>
<p>conetnt comment</p>
</div>
<div id="content2" class="content hide">
<h1>content2</h1>
<p>conetnt comment</p>
</div>
<div id="content3" class="content hide">
<h1>content3</h1>
<p>conetnt comment</p>
</div>
</article>
-----------------CSS
article .content.hide{
display:none;
}
article .content.show{
display:block;
}
------------------JS
$(function(){
$("li","nav").on("click",function(){
$(".content.show").addClass("hide").removeClass("show");
$("#"+$(this).data("target")).addClass("show").removeClass("hide");
});
});
勢いで書いたにも関わらず、まったくテストしてませんが、たぶん動きます。
