タブ切り替えUIの実装 Tab

タブの切り替えを実装する方法をご紹介します。
あくまでここでご紹介するコードは一例です。

デモ

ボックス1

ボックス2

ボックス3

functionの定義とHTMLの準備

【JavaScript】

【HTML】

使い方

引数には設定値を格納します。

設定値 初期値 説明
boxElementIdName '' ナビゲーションとして実装する要素の親要素のID名(必須)
anchorElementName 'a' ナビゲーションとして実装する要素の要素名
linkAttrName 'href' ナビゲーションとして実装する要素の属性名(切り替える要素のID名が格納されている属性名)
openClassName 'open' 表示時のCSSクラス名
defaultShowIndex 0 初期時に表示するタブのインデックス番号

JavaScript逆引きリファレンス一覧へ戻る