こんにちわ芝原です。
始めてのJavascript関連の投稿です。
お手柔らかにどうぞ。
たくさんのコンテンツをすっきり表示させるための方法として、タブという手法がよくつかわれると思います。
今回は、この便利なタブ表示をJQueryを使って実現する方法を解説します。
動作はこんな感じになります。
http://jqueryui.com/demos/tabs/default.html
必要なファイルのダウンロード
jquery本体とui.core.js、ui.tabs.jsが必要です。
こちらから簡単にダウンロードできますが余計なファイルも多分に入っているので、こちらからファイルを選択してダウンロードしてもいいと思います。
スクリプトの読み込み
必要なファイルを読み込みます。
head内に記述するのが一般的です。
<script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/ui.core.js"></script> <script type="text/javascript" src="/path/to/ui.tabs.js"></script>
HTMLの構造
<div id="tabs">
<ul>
<li><a href="#tab1">タブに表示する文字</a></li>
<li><a href="#tab1">タブに表示する文字</a></li>
<li><a href="#tab3">タブに表示する文字</a></li>
</ul>
<div id="tab1">
タブの中身
</div>
<div id="tab2">
タブの中身
</div>
<div id="tab3">
タブの中身
</div>
</div>
タブの設定
<script type="text/javascript">
var $tabs = $('#tabs').tabs();
$tabs.tabs('select' 1); // 2番目のタブを選択状態にする
// デフォルトでは1番目のタブ
</script>
たったこれだけでタブが実装できました。
さらに詳しい情報を知りたい方は、公式ドキュメントをご覧ください。
