このsTabs(simple Tabs)は、BBC Newsで採用していたスクリプトを参考に作成した。※var DOC_TabsをsTabsに変更した。jQuery不要で、最小サイズのスクリプトでタブ切り替えを実現できる。CSSも最小限で、タブ・バーのスタイル(.tabs, .tabs ul, tabs li)を指定するだけである。タブ・グループ名を追加することで、同一ページに複数のタブ切り替えを書ける。

• /assets/css/stabs.css (1kb)
• /assets/js/stabs.js (5kb)

数字でみる日本の高齢化

• 人口の変化
• 資産運用状況
• 世界の高齢化

タブで表示を切り替えるスクリプトの例です。簡単なチュートリアルやヘルプを記述するのに便利である。

タブに対応したレイアウトコンテナ<DIV>にHTMLを記述する。

<div id="tab2" class="hidden">
  <img src="img/agingjapan-2.gif" width=360 height=180 hspace=10>
  タブに対応したレイアウトコンテナ&lt;DIV&gt;にHTMLを記述する。
</div>

<div class="tabs">
 <h3>数字でみる日本の高齢化</h3>
 <ul>					
  <li id="myTabs_0" class="current">人口の変化</li>
  <li id="myTabs_1" class="">資産運用状況</li>
  <li id="myTabs_2" class="">世界の高齢化</li>
 </ul>
</div>

<script>
 sTabs.addTabGroup("myTabs", "", "standard", "", "", "");
 sTabs.addTab("myTabs_0", "tab1");
 sTabs.addTab("myTabs_1", "tab2");
 sTabs.addTab("myTabs_2", "tab3");
 sTabs.init("myTabs");
</script>

複数タブ・グループ

※異なるTabGroup名を追加して、同じページに複数のタブを記述できる。

 <link rel="stylesheet" href="/assets/css/stabs.css">
 <script language="javascript" src="/assets/js/stabs.js"></script>
 
 <div class="tabs">
  <ul>
   <li id="Tabx_0" class="current">写真</li>
   <li id="Tabx_1">動画</li>
   <li id="Tabx_2">地図</li>
  </ul>
 </div>

 <div id="tab1"><img src="/assets/img/001.jpg"></div>
 <div id="tab2" class="hidden"><img src="/assets/img/002.jpg"></div>
 <div id="tab3" class="hidden"><img src="/assets/img/003.jpg"></div>

 <script>
  sTabs.addTabGroup("Tabx", "", "standard", "", "", "");
  sTabs.addTab("Tabx_0", "tab1");
  sTabs.addTab("Tabx_1", "tab2");
  sTabs.addTab("Tabx_2", "tab3");
  sTabs.init("Tabx");
 </script>

※addTabGroupスクリプトは本文の後に書く。