History State Tabs - JavaScript Client

A tab selection is stored in history state so the URL and back button follow the visible panel.

Program

The History API lets client apps update the address bar and restore state without full page reloads.

history_state_tabs.html

<nav><button data-tab="overview">Overview</button><button data-tab="logs">Logs</button></nav>
<section id="panel">Overview panel</section>
<script>
  const panelEl = document.querySelector("#panel");
  function show(tab) { panelEl.textContent = tab + " panel"; }
  document.addEventListener("click", event => {
    const tab = event.target.dataset.tab;
    history.pushState({ tab }, "", "#" + tab);
    show(tab);
  });
  addEventListener("popstate", event => show(event.state?.tab || "overview"));
</script>

history.pushState pushState adds a browser history entry without loading a new document.

popstate popstate fires when the active history entry changes.