Tabs with URL Sync — Free HTML CSS JS Hash-Linked Tab Bar Snippet

<div class="tabs" role="tablist" aria-label="URL synced tabs">
  <button class="tab" data-tab="overview" onclick="goToTab('overview')">Overview</button>
  <button class="tab" data-tab="pricing" onclick="goToTab('pricing')">Pricing</button>
  <button class="tab" data-tab="faq" onclick="goToTab('faq')">FAQ</button>
</div>
<div class="panels">
  <div class="panel" data-panel="overview">
    <h3>Overview</h3>
    <p>This tab's state lives in the URL hash. Try refreshing the page after switching tabs.</p>
  </div>
  <div class="panel" data-panel="pricing">
    <h3>Pricing</h3>
    <p>Share a link straight to this tab — <code>#pricing</code> opens it automatically on load.</p>
  </div>
  <div class="panel" data-panel="faq">
    <h3>FAQ</h3>
    <p>Browser back/forward buttons also switch tabs, since each click pushes a new hash entry.</p>
  </div>
</div>
<p class="hash-hint">Current hash: <code id="hashDisplay">#overview</code></p>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 20px; justify-content: center; min-height: 100vh; }

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 4px 4px 0 0;
}
.tab:hover { color: #1e293b; background: #f1f5f9; }
.tab.active { color: #6366f1; border-bottom-color: #6366f1; font-weight: 600; }

.panel { display: none; }
.panel.active { display: block; }
.panel h3 { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.panel p { font-size: 14px; color: #64748b; line-height: 1.6; }
.panel code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.hash-hint { margin-top: 20px; font-size: 13px; color: #94a3b8; }
.hash-hint code { background: #eef2ff; color: #4f46e5; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

function goToTab(tabName) {
  location.hash = tabName;
}

function activateTab(tabName) {
  const valid = ['overview', 'pricing', 'faq'];
  const name = valid.includes(tabName) ? tabName : 'overview';

  document.querySelectorAll('.tab').forEach(t => {
    t.classList.toggle('active', t.dataset.tab === name);
  });
  document.querySelectorAll('.panel').forEach(p => {
    p.classList.toggle('active', p.dataset.panel === name);
  });

  const display = document.getElementById('hashDisplay');
  if (display) display.textContent = '#' + name;
}

function readHashAndActivate() {
  const tabName = location.hash.replace('#', '');
  activateTab(tabName);
}

window.addEventListener('hashchange', readHashAndActivate);
readHashAndActivate();