タブ切替
ナビ ／ パターン集トップ
同じ場所で内容を切り替える。JavaScript が要る部品なので、キー操作まで含めて貼る
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<div class="tabs" data-tabs>
<div class="tabs__list" role="tablist" aria-label="表示切替">
<button type="button" role="tab" id="tab-a" aria-selected="true" aria-controls="panel-a">概要</button>
<button type="button" role="tab" id="tab-b" aria-selected="false" aria-controls="panel-b" tabindex="-1">詳細</button>
</div>
<div class="tabs__panel" role="tabpanel" id="panel-a" aria-labelledby="tab-a" tabindex="0">概要の内容</div>
<div class="tabs__panel" role="tabpanel" id="panel-b" aria-labelledby="tab-b" tabindex="0" hidden>詳細の内容</div>
</div>
<script>
// タブは JavaScript が要る部品。これが無いと2枚目は永久に開かない
document.querySelectorAll("[data-tabs]").forEach(function (root) {
var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
function select(tab) {
tabs.forEach(function (t) {
var on = t === tab;
t.setAttribute("aria-selected", String(on));
t.tabIndex = on ? 0 : -1; // roving tabindex。Tab は1回で帯を抜ける
document.getElementById(t.getAttribute("aria-controls")).hidden = !on;
});
tab.focus();
}
tabs.forEach(function (tab) {
tab.addEventListener("click", function () { select(tab); });
tab.addEventListener("keydown", function (event) {
var i = tabs.indexOf(tab), n = tabs.length, to;
if (event.key === "ArrowRight") to = (i + 1) % n;
else if (event.key === "ArrowLeft") to = (i - 1 + n) % n;
else if (event.key === "Home") to = 0;
else if (event.key === "End") to = n - 1;
else return;
event.preventDefault(); /* 矢印での画面スクロールを止める */
select(tabs[to]);
});
});
});
</script>.tabs__list {
display: flex;
gap: var(--space-2);
border-block-end: 1px solid var(--color-border);
margin-block-end: var(--space-4);
}
.tabs__list [role="tab"] {
font: inherit;
cursor: pointer;
padding: var(--space-2) var(--space-4);
border: 0;
background: transparent;
color: var(--color-text-muted);
border-block-end: 2px solid transparent;
margin-block-end: -1px;
}
.tabs__list [role="tab"][aria-selected="true"] {
color: var(--color-text);
border-block-end-color: var(--color-accent-text);
font-weight: 700;
}
.tabs__panel {
padding-block: var(--space-2);
}確認する#
- 選択中タブに aria-selected="true"
- 非表示パネルは hidden
- 矢印キー・Home・End で移り、Tab は1回で帯を抜ける（roving tabindex）
- JavaScript が動かないと2枚目は開かない。落とせない内容はタブに入れない