dom_dom0900_009

タブ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>