Webという媒体は技術の構造上、画面上の情報を切り替えるには一度ブラウザの表示をリセットしなくてはなりません。
当然、次の画面が表示されるまでに待ち時間が発生するわけです。

それを解決するために、最近はAjaxという技術が注目されています。
Ajaxほど大げさな事をしなくても、画面の切り替えなしに予め用意された画面を切り替える程度であれば、JavaScriptとcssだけで簡単に実現できたりします。

そこで、簡単なタブ風ボックスを作ってみました。
３つの記事をタブをクリックする事によって、画面の遷移なしで切り替える事ができます。

sample(別窓で開きます)

JavaScriptもcssもすべてhtml内に記述していますので、興味のある方はソースを見てみてください。
ただ、JavaScriptの知識はかなり怪しいので、もっと効率のいい書き方があると思います。ご了承ください。

一応簡単に解説しちゃいます。
まず、3つの要素にそれぞれ、content01,content02,content03というIDを付けます。
これは、JavaScriptで表示・非表示を切り替える為の識別子になります。

同じようにそれぞれのタブにもIDが振ってあります。
つぎにJavaScriptでcontent01以外をdisplay:none;にします。以下の記述です。

function ini() { document.getElementById("content01").style.display = "block";
〜省略〜
document.getElementById("b01").style.backgroundColor = "#34A9E6";

backgroundColor = "#34A9E6";の部分は、ボタンの色を変えています。
で、以下の関数が表示・非表示の切り替えと、ボタンの色替えを行う関数です。

function btn(sel,btn) {
//表示をリセット
document.getElementById("content01").style.display = "none";
〜省略〜
//ボタンの色をリセット
document.getElementById("b01").style.backgroundColor = "#EE9247";
〜省略〜
//クリックされたボタンに対応したブロックを表示
document.getElementById(sel).style.display = "block";
//ボタンの色を変更
document.getElementById(btn).style.backgroundColor = "#34A9E6";
}

一度すべてを非表示にして、クリックされたものだけ表示させるって感じです。
aタグで関数btnに引数を渡しています。

<a href="javascript:btn('content01','b01');" >

一つ目の引数で、表示されるコンテンツのIDを。二つ目で色を変えるボタンのIDを指定しています。

一度表示させた要素をJavaScriptで非表示にしていますので、JavaScriptを切っている方は最初からすべてが表示されます。
かなり単純なサンプルですが、JavaScriptは簡単にcssにアクセスできますので、かなり動的な表現の幅が広がると思います。
また、ここからcss上の記述とJavaScript上の記述の相互表が見れます。