3. タブの切り替え機能を実現するJavaScriptを記述

最後に、タブとして機能するようJavaScriptを記述します。また、リンク部分(タブそのもの)をクリックすることでJavaScriptが呼び出されるよう、HTMLにも少し属性を書き加えます。

ここでの記述内容は、大きく分けて次の3つです。
それでは、順番に見ていきましょう。

3-1. タブを切り替えるChangeTab関数を記述
まず、HTML内に以下のJavaScriptソースを記述しておきます。「タブを作るHTML」の記述位置よりも前に記述しておく方が良いでしょう。
<script type="text/javascript"><!--
function ChangeTab(tabname) {
   // 全部消す
   document.getElementById('tab1').style.display = 'none';
   document.getElementById('tab2').style.display = 'none';
   document.getElementById('tab3').style.display = 'none';
   // 指定箇所のみ表示
   document.getElementById(tabname).style.display = 'block';
}
// --></script>
上記のJavaScriptソースは、「選択した1つのタブだけを表示し、他のタブは非表示にする」という機能のChangeTab関数を作っています。タブの中身を作っている各要素の「displayプロパティの値」を変化させることで、タブの表示・非表示を切り替えます。

この関数では、表示対象のタブ(を作るボックス)のid名を、引数で受け取っています。一旦すべての要素を非表示にした上で、引数で受け取ったid名のある要素だけを表示させています。

上記ソース中の「tab1」・「tab2」・「tab3」の部分は、それぞれHTMLに記述したid属性の値(id名)と一致させて下さい。タブを4つ以上作った場合は、ここもタブの数だけ列挙する必要があります(個数に制限はありません)。

3-2. HTMLに関数を呼び出す記述を追加
さらに、タブそのものを作っているHTML(aタグ)に、以下のようにonclick属性を加えます。これによって、タブをクリックすると、(3-1で作成した)JavaScriptが実行されるようになります。
<p class="tabs">
   <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">タブ1</a>
   <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">タブ2</a>
   <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">タブ3</a>
</p>                                                                   
onclick属性の中に、先ほど作成したChangeTab関数を呼び出す記述を加えています。上記ソース中の「tab1」・「tab2」・「tab3」の部分は、それぞれタブの中身を作ったボックス(div要素)のid属性の値(id名)と一致させて下さい。

最後に「return false;」を加えることで、本来のリンクとしての機能を無効にしています。この記述を忘れると、タブそのものを作っているリンクが「ページ内リンク」として機能してしまい、表示位置が動いてしまうので注意して下さい。

3-3. 特定のタブ1つを最初に表示しておく記述を追加
最後に、「ページの表示直後に『デフォルトタブ』として表示させておきたいタブ」だけを表示するよう、タブを作っているHTMLの直後に以下のソースを記述します。 この記述を忘れると、ページ表示直後にはすべてのタブが並んで表示されてしまいますので注意して下さい。
<script type="text/javascript"><!--
   // デフォルトのタブを選択
   ChangeTab('tab1');
// --></script>
上記は、「タブ1」(id名を「tab1」にしたタブ)をデフォルトで選択させておきたい場合の記述です。実際のid名にあわせて修正して下さい。

この記述は、必ずタブを作っているHTMLよりも後に記述して下さい。前に記述するとエラーになってしまって実行されません。このスクリプトは、ページの読み込み完了を待たずにすぐ実行されるため、JavaScriptが実行される段階でタブの部分が読み込めていない場合は、(操作対象が存在しないため)エラーになります。

※他に、スタイルシートのdisplayプロパティを使って、あらかじめ「1つのタブ以外はすべて非表示状態にしておく」方法もあります。ただし、その場合は、あとからデフォルトのタブを変更したくなったときに少々修正が面倒です。

これまでに記述してきたHTML・CSS・JavaScriptすべてのソースをあわせて表示させると、下図のように見えます。

ここまでのソースでできあがる「タブ」機能の表示例

ここまでのソースでできあがる「タブ」機能の表示例


上図を実際にブラウザで表示確認してみるには、作成過程のサンプルページ3をご参照下さい。

以上で完成です。

上記のサンプルでは中身が少ないのでスクロールバーが表示されませんが、指定の高さ(ここでは150ピクセル)を越えるほどの中身を記述すれば、スクロールバーが表示されます。

最後に、今回ご紹介した「タブ機能を作る」すべてのソースをまとめて掲載しておきます。コピー&ペーストで使ってみる際にご活用下さい。