JavaScript でタブ切り替え UI を実装する

先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。

時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。

• タブ切替をサクッと実装 ： Archiva

タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクとしてタブが機能するもの。 Archiva さんのスクリプトはピッタリでした。

多少カスタマイズして使わせていただきましたが、まずは実際にどんな感じになるのかをこちらでご確認ください。

JavaScript ON ではタブ切り換えに、JavaScript を OFF にするとすべての内容が縦に表示され、タブがページ内リンクとして機能するようになります。

上のサンプルで使用している XHTML ソースは下記のとおり。 （一部省略）

<div id="javascript_tab_sample">
 
 <ul id="tab">
  <li class="selected"><a href="#w3c">W3C</a></li>
  <li><a href="#xhtml">XHTML</a></li>
  <li><a href="#css">CSS</a></li>
 </ul>
 
 <dl id="w3c">
  <dt>World Wide Web Consortium</dt>
  <dd>
   <p>...</p>
  </dd>
 </dl>
 
 <dl id="xhtml">
  <dt>XHTML</dt>
  <dd>
   <p>...</p>
  </dd>
 </dl>
 
 <dl id="css">
  <dt>Cascading Style Sheets</dt>
  <dd>
   <p>...</p>
  </dd>
 </dl>
 
</div>

タブで切り替わる部分 （サンプルでは dl 要素） にそれぞれ適当な id 属性値を付け、タブはリストでマークアップして各リンクを設定、ul 要素には id 属性も付加。デフォルトで選択状態になる左端のタブ （li 要素） に class 属性を付けておきます。サンプルでは 「selected」 という class 属性値を使用していますが、オリジナルでは 「present」 になっています。ここは変更がきくのでお好きなように。

次に JavaScript の用意を。オリジナルではスクリプトを 2つに分けているのですが、今回は 1つにまとめてみます。

/*--setup--*/
window.onload=function() {
tab.setup = {
   tabs: document.getElementById('tab').getElementsByTagName('li'),
   pages: [
      document.getElementById('w3c'),
      document.getElementById('xhtml'),
      document.getElementById('css')
   ]
}
tab.init();
}
/*--setup end--*/
  
var tab = {
   init: function(){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
  
      for(i=0; i<pages.length; i++) {
         if(i !== 0) pages[i].style.display = 'none';
         tabs[i].onclick = function(){ tab.showpage(this); return false; };
      }
   },
  
   showpage: function(obj){
      var tabs = this.setup.tabs;
      var pages = this.setup.pages;
      var num;
  
      for(num=0; num<tabs.length; num++) {
         if(tabs[num] === obj) break;
      }
  
      for(var i=0; i<pages.length; i++) {
         if(i == num) {
            pages[num].style.display = 'block';
            tabs[num].className = 'selected';
         }
         else{
            pages[i].style.display = 'none';
            tabs[i].className = null;
         }
      }
   }
}

やっていることはなんとなくわかるかと。タブが増えたら、セットアップ部分を書き足せば OK です。セットアップ部分の 「window.onload=function() {...}」 は、JavaScript を 1つにまとめるために、追加しています。スクリプトの構造上、セットアップ部分を一番最後に実行しないといけないので。

でこのスクリプトを適当な名前 （サンプルでは tab_change.js） で保存して、先ほどの XHTML に読み込んであげます。場所は head 要素内とかで下記のように。

<script type="text/javascript" src="js/tab_change.js"></script>

これで出来上がり。とっても簡単です。

あとは、スタイルを当てて、さらにひと工夫するなら scriptaculous あたりでタブ切り替え時にエフェクトを加えてみるとかすると面白いかも。 Apple iLife ' 08 のページなんかは参考になるかと思います。

今回使用した、サンプルページのソース一式を下記に置いておきますのでどうぞ。

• tab_sample.zip (3.4KB)

あと、同じようなタブ切り替え用の JavaScript ライブラリとしては、Control.Tabs なんかもいいかもしれません。