簡単に使えるタブインタフェーススクリプト

この記事は最終更新日から8年以上経過しています。
内容が古い可能性がありますのでご注意ください。

Webページでタブ型のインタフェースを実現するスクリプトを紹介。
この手のスクリプトは山のようにあるが、この「SimpleTabs」には以下のような特徴がある。

  • 単体動作(jQueryとかは必要なし)
  • 軽い(圧縮版なら3KB。圧縮無しでも7KB)
  • HTML要素にclassを追加するだけで動作
  • ページを移動しても、最後に開いていたタブを維持(cookie利用)

ダウンロードとサンプルコードは以下に。

まずヘッダに、スクリプト本体とCSSへのリンクを入れる。

<head>
<script src="simpletabs_1.3.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="simpletabs.css">
</head>

アーカイブの中には「simpletabs_1.3.js」と「simpletabs_1.3.packed.js」が入ってるが、packedはサイズを小さくした圧縮版なので、好きな方を読み込ませればOK。

HTML本文にはこんな風に。

<div class="simpleTabs">
	<ul class="simpleTabsNavigation">
		<li><a href="#">タブ1枚目タイトル</a></li>
		<li><a href="#">タブ2枚目タイトル</a></li>
		<li><a href="#">タブ3枚目タイトル</a></li>
	</ul>
	<div class="simpleTabsContent">タブ1枚目の内容</div>
	<div class="simpleTabsContent">タブ2枚目の内容</div>
	<div class="simpleTabsContent">タブ3枚目の内容</div>
</div>

タイトルのliを増やしたら、それと対応する順の箇所にdivを作ればOK。

この手のスクリプトに良くある、タイトル要素とコンテンツ要素を紐付けするような番号を振ったりって作業は必要ない。