【ホームページ作成】ページ移動せずに内容を変更するタブを作る

ページを移動することなく指定範囲内の内容を切り替えられる「タブ」機能を作ってみましょう。 狭い領域にたくさんの情報を掲載したい場合などに使えます。
例えば、以下のような感じです。 「更新履歴」・「オススメ」・「検索」などの部分をクリックしてみて下さい。内容がすぐに切り替わります。
※JavaScriptが利用可能で、スタイルシートが有効になっている環境のみ
※最初は「更新履歴」タブが選択されていますのでそこをクリックしても変化はありません。

3つのタブがあり、それぞれをクリックすると内容が切り替わります。 （シンプルなデザインなのであまりタブらしく見えませんが、画像を活用するなど工夫すればもっとタブらしくなります。その方法は別の機会にご紹介いたします。）

各タブの表示内容はその都度読み込まれるわけではなく、最初からHTML内に含まれています。そのため、表示の切り替えに時間はかかりません。
※JavaScriptかスタイルシートのどちらかが利用できない環境では、すべてのタブの内容が一気に表示されます。

今回は、上記のようなタブ機能を作る方法をご紹介いたします。 スタイルシートでのデザインと、短いJavaScriptで簡単に実現できます。

【この記事の目次】

1. まずはHTMLを書く (Page.2)
2. スタイルシートで装飾する (Page.3)
3. タブを実現するJavaScriptを書く (Page.4)
4. ソースのまとめ (Page.5)