シンクグラフィカ札幌

タブ切り替えJavascript

いまさら感丸出しですがレスポンシブWeb用でちょっと作る機会があったので公開します。よくあるタブ切り替え用Javascriptです。jqueryやprototypeは使っていません。

基本的には美しいHTML構造をそのままに、ちょっぴりインタラクティブなタブ風味付けを付加しちゃうぞ!的な位置づけなので、その他多くのタブ切り替えと比べるととても貧弱かもしれません。

レスポンシブWebを想定して、スマートフォンからの場合はタブ機能を無効にし、一般的なページ内アンカーとして振る舞うという設定をすることができます。もちろんスマートフォンサイズのタブであればスマートフォンで動作するようにもできます。

機能

タブ切り替えJavascriptには以下の機能が盛り込まれております。

すごく簡単に設置できる
たぶん簡単です。あんまり複雑では無いはず。
レスポンシブWebに対応
この手のJavascriptはレスポンシブWebるときに結構邪魔臭かったりします挙動が。なのでスマホの場合無効にする!みたいな設定を付けることができます。
見た目はCSSで好きにして
見た目をいぢるのはちょっとめんどくさいかもしれませんがCSSで好き勝手にやってください。

デモ

tabs.jsのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

仕様詳細

スクリプト名称 tabs.js
設置レベル レベル2

更新履歴

2012-10-08バージョン1.0.1を公開

ダウンロード

tabs.jsのダウンロード