HTMLコーダーさんのJSを使わないタブ切り替えが、シンプルな実装で素晴らしかったので忘備録的にメモ。
概要
- タブは『インプットボックス』＋『ラベル』を使用
- コンテンツエリアは常時非表示にしておく
- コンテンツエリアは選択されたときのみ表示する
サンプルコード
動かしてないので不具合あるかもですが、こんな感じでした。
<divclass="tabs"><!-- タブ --><inputid="tab_1"type="radio"name="tab"checked=""><labelclass="tab_label"for="tab_1">月別</label><inputid="tab_2"type="radio"name="tab"><labelclass="tab_label"for="tab_2">週間別</label><inputid="tab_3"type="radio"name="tab"><labelclass="tab_label"for="tab_3">曜日別</label><divclass="tab_content"id="content_1">コンテンツ１</div><divclass="tab_content"id="content_2">コンテンツ２</div><divclass="tab_content"id="content_3">コンテンツ３</div></div>input[name="tab"]{display:none;}.tabs{width:100%;}.tab_label{border-top:1pxsolid#999999;border-bottom:1pxsolid#999999;}.tabsinput:checked+.tab_label{border-bottom:2pxsolid#55C501;}#tab_1:checked~#content_1,#tab_2:checked~#content_2,#tab_3:checked~#content_3{display:block;}.tab_content{display:none;}