最軽量 sTabs

  • 投稿日:
  • カテゴリ:

jQueryを使わない、もっとも軽量なスクリプトをstabs (simple Tabs) とした。

 <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スクリプトは本文の後に書く。