タブUIでURLのハッシュに同期させると、ページ再読み込み後も状態を復元できる。タブクリック時にlocation.( A ) = ‘#p2’のように設定し、初期表示時は( B )イベント(例: DOMContentLoaded)でlocation.hashを読んで該当パネルを開く。
解答
A: hash
B: 初期化(DOMContentLoaded)
解説
location.hashでタブ状態をURLに反映できる。読み込み完了後にハッシュを見て、対応タブ・パネルをアクティブにすることで復元が可能。
使用例(サンプルコード)
[ html ]
<div role="tablist">
<button role="tab" aria-controls="p1">Tab1</button>
<button role="tab" aria-controls="p2">Tab2</button>
</div>
<section id="p1">P1</section><section id="p2" hidden>P2</section>
<script>
document.addEventListener('DOMContentLoaded', ()=>{ // (B)
const id = (location.hash || '#p1').slice(1);
show(id);
});
document.querySelector('[role=tablist]').addEventListener('click', e=>{
if(e.target.getAttribute('role')!=='tab') return;
const id = e.target.getAttribute('aria-controls');
location.hash = '#'+id; // (A)
show(id);
});
function show(id){
document.querySelectorAll('section[id]').forEach(p=>p.hidden = p.id !== id);
}
</script>