2008年2月アーカイブ

prototype.js でタブ切り替え - AUSGANG SOFT
http://a-h.panepon.com/einfach/archives/2006/1012175043.html

に、同じページで複数タブを表示できるようにならないか？
というご要望をいただきました。l

もともと１つしかタブがない想定なので、大幅な改造が必要。
いい機会なので、作ってみました。

サンプル
http://a-h.panepon.com/einfach/archives/tabSample.html

CSSもJavascriptも↑のファイル内に書いています。


変更点

• 複数タブに対応

ページ末尾の

new TabMaker('tab');
new TabMaker('menu');

↑という指定で、複数のタブを作っています。
サンプルを参考にHTML、CSSもそれぞれの名前で指定してください。
逆にいうと、デザインを別々にすることができます。

• document.getElementsByClassName の使用をやめました。
  ページによっては非常に重いという指摘をいただいていたので、必要ないようにしてみました。
  

• ページの読み込みを待たずに、タブ表示を行うようにした。
  タブのHTMLの直後にタブ表示をする処理をいれることで、読み込むを待つ必要をなくしています。
  

要望をいただいたgontaさんに感謝です。