タブつきのテーブル（表）を作る方法

HPのトップページに有る更新情報の表を、Yahoo！などのニュースサイトが使っている『タブ付き』のものに変えたくて色々と調べてみました。

参考にしたのはALl ABOUTさんのこの記事。
『ページを移動せずに内容を変更するタブを作る方法』

今、アップしている状態ですが、左の画像のような形にしたかったのです。
タブをクリックすると、ページの移動をせずにテーブル内の内容が切り替わるという機能です。
かつて使われていたFrameのサイトにも似ていますが、ページを開いて時点で各タブの読み込みが終わっている他、ページの移動が無いので読む側にもストレスが無くて使いやすそうです。

細かいつくり方はリンク先を参照してみてください。
仕組みだけ紹介しますね。

上記のタブ付きテーブルは実際には左の画像のような形で作られています。
タブをクリックしても再度の読み込みが行われないのは、ページを開いた時点で既にタブ内の情報を一通り読み込んでしまっているからなんですね。
これをJavaScriptの記述によって1つ以外のタブは表示しない、タブをクリックしたら表示を切り替えるという作業を行う事で、<iFrame＞のような動作を読み込みを行わずに実行しているものです。