フロントエンド開発Blog

オレには鈍器がある

JavaScript , UI , tab

シンプルなタブ切り替え処理を実装してみました。

確認済み端末:
(PC)
・IE8~11
・Firefox
・Google Chrome
・Safari
(タブレット、SP)
・ios 6~7 safari, chrome
・Android 2.2~4.2 標準ブラウザ, chrome

http://jsdo.it/oredon/223w

Options:
{
wrpSelector: "#simpleTabWrp", //tab全体を囲むセレクタ
btnSelector: ".simpleTabBtn", //切り替えボタンセレクタ
containerSelector: ".simpleTabContainer",//切り替え対象共通のセレクタ
currentClassname: "cur", //カレントクラス(ボタンにつきます)
attachedCurrentElem: function(){ //カレントクラスを付ける要素(thisはここではaタグ)
//return this.closest("li")
return this;
},
btnChainAttr: "href", //切り替えボタンと対象要素を、ボタンのどの要素の値を使って連携させるか(デフォルトはhref)
eventTrigger: "click", //ボタンの切り替えイベント
initCallback: null, //初回コールバック(function)
beforeChangeCallback: null, //切り替え前のコールバック(function)
afterChangeCallback: null //切り替え後のコールバック(function)
}

ページトップへ

関連ページ

ページトップへ