Simple tabs

名称
Simple tabs
作成者
中村 享介 氏(ロクナナワークショップ)
配布元
『Web Designing』誌 2009年6月号
ライセンス
MITライセンス
特徴
『Web Designing』誌 2009年6月号で掲載されていたスクリプトファイルです。
jQueryを使った、シンプル・軽量なプラグイン。ファイルサイズも1KB以下(705バイト)。
『Web Designing』でのサンプルデータは転載・転用禁止ですが、javascriptファイルはMITライセンスなので、こちらでcss・htmlファイルを作成しました。

サンプルはこちらを御覧ください。

設置方法

  1. jQueryのサイトから、最新版のjQueryファイル「jquery-1.3.2.min.js」をダウンロードします。
  2. そのほかのファイルは「Simple tabs」のzipファイルをダウンロードしてください。
    [root]
     ├[js]
     │ ├ jquery-1.3.2.min.js
     │ └ tabs.js
     └[css]
       ├ reset.css
       └ style.css
  3. htmlファイルのhead部分に以下の文を追加します。
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/tabs.js"></script>
  4. HTMLソースのタブ部分は以下のとおり
    <div id="wrapper">
    	<ul class="tabNav">
    		<li><a href="#t1">1つめのタブ</a></li>
    		<li><a href="#t2">2つめのタブ</a></li>
    		<li><a href="#t3">3つめのタブ</a></li>
    	</ul>
    	<div id="t1" class="tabContent">
    		<h3>1つめのタブ</h3>
    		<p>1つめのタブです。</p>
    		<p>仮テキスト仮テキスト仮テキスト</p>
    		<p>仮テキスト仮テキスト仮テキスト仮テキスト</p>
    	</div>
    	<div id="t2" class="tabContent">
    		<h3>2つめのタブ</h3>
    		<p>2つめのタブです。</p>
    		<p>仮テキスト仮テキスト仮テキスト仮テキスト</p>
    	</div>
    	<div id="t3" class="tabContent">
    		<h3>3つめのタブ</h3>
    		<p>3つめのタブです。</p>
    	</div>
    </div>
  5. 以上で完了です

Simple tabsサンプルページ

「tabs.js」を修正すれば、ID・CLASS名を変更できます。

2009.12.14

ページトップに戻る