札幌Web制作のシンクグラフィカ

タブ切り替えJavascript

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

タブ切り替えJavascriptの概要

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

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

タブ切り替えJavascriptの機能

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

デモサイト

https://lab.synck.com/tabs.js/

最新版を無料ダウンロード

タブ切り替えJavascriptの更新履歴

更新日 バージョン 更新内容
2012-10-08 1.0.1 バージョン1.0.1を公開