dom_dom0900_006

タブUIで「ボタンをクリックしたときにURLハッシュを更新して、リロード後も選択状態を再現したい」。適切な手法はどれですか？

  1. localStorageだけを使い、URLは変えない
  2. history.pushState()やlocation.hashを更新し、読み込み時にハッシュから復元する
  3. console.logにアクティブタブを出す
  4. alertでユーザーに手動で選択させる
正解
  1. history.pushState()やlocation.hashを更新し、読み込み時にハッシュから復元する
解説

location.hashやHistory APIで現在のタブIDをURLに反映させ、DOMContentLoaded時にハッシュを読んでパネル表示を復元するとUXが向上します。

使用例（サンプルコード）

[ html ]

<div role="tablist">
  <button role="tab" aria-controls="p1" id="t1" aria-selected="true">Tab1</button>
  <button role="tab" aria-controls="p2" id="t2">Tab2</button>
</div>
<div id="p1" role="tabpanel">A</div>
<div id="p2" role="tabpanel" hidden>B</div>
<script>
function activate(id){
  document.querySelectorAll('[role="tab"]').forEach(t=>{
    const pid = t.getAttribute('aria-controls');
    t.setAttribute('aria-selected', t.id===id);
    document.getElementById(pid).hidden = t.id!==id;
  });
}
document.querySelectorAll('[role="tab"]').forEach(t=>{
  t.addEventListener('click', ()=>{
    activate(t.id);
    location.hash = t.id;
  });
});
window.addEventListener('DOMContentLoaded', ()=>{
  const id = location.hash.slice(1) || 't1';
  activate(id);
});
</script>