【ホームページ作成】クリックしたタブの色を変化させる方法

過去3回に渡って、「ページ移動せずに内容を変更できるタブ機能（タブボックス）」を作る方法を解説してきました。
しかし、これまでの方法では、タブの色を変化させることができず、いまいち「どのタブが選択中なのか？」が分かりにくいという問題点がありました。

そこで今回は、下記のように「クリックしたタブの色が変化する」タブ機能（タブボックス）を作る方法をご紹介いたします。

上記はタブが3つあるサンプルです。それぞれのタブをクリックしてみて下さい。（最初は左端のタブが選択済みの状態です。）各タブをクリックすると、
(1) タブの色が変化し、
(2) タブボックス内の表示内容も変化
します。
選択されていないタブは灰色で表示されるため、選択されているタブが明確に分かります。
※JavaScriptが有効な環境でのみ機能します。（JavaScriptが無効だと、すべてのタブの内容が最初から表示されます。）

今回は、上記のように、選択中のタブの色を変化させることで「どのタブが選択中なのか？」を明確に分かるようにしたタブボックスを作る方法をご紹介いたします。
この記事は、下記の3つの記事を既に読まれていることを前提にしていますので、未読の場合は先にそちらをご参照下さい。

1. 「ページ移動せずに内容を変更するタブを作る」（2008/08/02公開）
2. 「角の丸い「タブ」を作る」（2008/08/12公開）
3. 「角丸タブを使ったタブボックスを作る」（2008/08/22公開）

基本的なソースや必要な画像の作成方法については、上記の3記事で既に説明していますので、本記事中では省略しています。
それでは、上記のサンプルを実現するソースを見ていきましょう。

【この記事の目次】

Page.1 クリックしたタブの色を変化させる見本（このページ）
Page.2 スクリプトで色を変化させる方法
Page.3 色を変化させるJavaScript関数を作る方法
Page.4 ソースのまとめ