(X)HTMLタグの設定
それでは最も簡単な例から始めましょう。サンプル01はシンプルなタブを表示するスクリプトです。規定されたとおりにタグにスタイルシートのクラスを指定し、スクリプトを実行するだけで、すぐにタブ機能を実現することができます。それでは順番に説明しましょう。まず、タブ機能を使うにはあらかじめ必要となるスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるtabview.cssとborder_tabs.cssファイルを<link>タグを使って読み込ませます。
<link rel="stylesheet" type="text/css" href="css/tabview.css">
<link rel="stylesheet" type="text/css" href="css/border_tabs.css">
次に以下の4つのスクリプトファイルを<script>タグを使って読み込ませます。
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/element-beta.js"></script>
<script type="text/javascript" src="js/connection.js"></script>
<script type="text/javascript" src="js/tabview.js"></script>
タブ機能の非同期通信の機能を使わないのであればconnection.jsは読み込ませる必要はありません。また、DOMライブラリを使わないのであればyahoo.js、event.jsファイルだけ読み込みます。element-beta.jsファイルはβ版なので正式版になった場合には、正式版のファイル名にする必要があります。