2008年2月アーカイブ

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

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

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

サンプル
http://a-h.parfe.jp/einfach/archives/tabSample.html

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


変更点

  • 複数タブに対応
ページ末尾の

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

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

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

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

このアーカイブについて

このページには、2008年2月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2008年1月です。

次のアーカイブは2008年6月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ