Tabs タブ · kf-tabs
同じ画面の中で見せる面を切り替える。見た目はヘッダの現在地と同じ(下線 2px accent)。
1 つ目のタブの中身。
2 つ目のタブの中身。
3 つ目のタブの中身。
HTML
<div class="w" id="t">
<div class="kf-tabs" role="tablist">
<button role="tab" aria-selected="true" aria-controls="p1">概要</button>
<button role="tab" aria-selected="false" aria-controls="p2">一覧</button>
<button role="tab" aria-selected="false" aria-controls="p3">履歴</button>
</div>
<div class="kf-tabpanel" id="p1" role="tabpanel">1 つ目のタブの中身。</div>
<div class="kf-tabpanel" id="p2" role="tabpanel" hidden>2 つ目のタブの中身。</div>
<div class="kf-tabpanel" id="p3" role="tabpanel" hidden>3 つ目のタブの中身。</div>
</div>
<script>Kafune.tabs(document.getElementById('t'));</script>kf-tabsの中にbutton role="tab"(その場で切り替え)かa(ページを移る)。選ばれているものはaria-selected="true"かis-current。- 中身は
kf-tabpanel。隠すのはhidden属性。 - その場で切り替えるなら
Kafune.tabs(root)を 1 回呼ぶ。aria-controlsの id で面を結ぶ。 - タブは 2〜5 個。それ以上は Sidebar か一覧に。文字は名詞で 6 文字まで。
- タブの中にタブを入れない。タブで「保存前の状態」を隠さない(切り替えで入力が消えたと誤解させる)。