タブ切り替えUIで、選択中タブのパネルのみを表示する最も簡潔な方法はどれですか？
- すべてのパネルにdisplay: blockを設定する
- 選択中以外のパネルへhidden属性やaria-hidden=”true”相当を付ける
- visibility: collapseを全パネルに付ける
- CSSアニメーションで非表示に見せる
正解
- 選択中以外のパネルへhidden属性やaria-hidden=”true”相当を付ける
解説
不要なパネルはhiddenやdisplay:noneで非表示にし、選択中のみ表示します。同時にaria-selectedやaria-controlsなどのARIA属性を適切に更新するとアクセシビリティが向上します。
使用例（サンプルコード）
[ html ]
<div role="tablist">
<button role="tab" aria-controls="p1" aria-selected="true">Tab1</button>
<button role="tab" aria-controls="p2">Tab2</button>
</div>
<div id="p1" role="tabpanel">Content 1</div>
<div id="p2" role="tabpanel" hidden>Content 2</div>
<script>
const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach(tab => tab.addEventListener('click', () => {
tabs.forEach(t => { t.setAttribute('aria-selected','false'); document.getElementById(t.getAttribute('aria-controls')).hidden = true; });
tab.setAttribute('aria-selected','true');
document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
}));
</script>