【JavaScript】URLに応じてページの表示内容を切り替える方法

// 例: https://example.com/campaign/?promo=summer#detail
const url = new URL(location.href);

url.pathname;                    // "/campaign/"   … パス
url.search;                      // "?promo=summer" … クエリ文字列
url.hash;                        // "#detail"       … ハッシュ
url.searchParams.get("promo");   // "summer"        … 個別パラメータ

<div id="campaign-banner" hidden>キャンペーン実施中！</div>
<div id="summer-banner"   hidden>夏のセール開催中</div>

function show(id) {
  const el = document.getElementById(id);
  if (el) el.hidden = false; // hidden 属性を外して表示
}

const path = location.pathname;

// 完全一致（推奨）：そのページだけに出す
if (path === "/campaign/") {
  show("campaign-banner");
}

// 配下すべて（/campaign/ や /campaign/2024/ など）に出すなら startsWith
if (path.startsWith("/campaign/")) {
  show("campaign-banner");
}

const params = new URLSearchParams(location.search);
const promo = params.get("promo"); // 無ければ null

// 値 → 表示する要素ID の対応表
const banners = {
  summer: "summer-banner",
  winter: "winter-banner",
};

const id = banners[promo];
if (id) show(id);

function applyHash() {
  const hash = location.hash || "#tab-home"; // 空なら既定タブ

  document.querySelectorAll("[data-hash-section]").forEach((el) => {
    // data-hash-section の値が現在のハッシュと一致する要素だけ表示
    el.hidden = el.dataset.hashSection !== hash;
  });
}

applyHash();                                   // 初回ロード時
window.addEventListener("hashchange", applyHash); // ハッシュが変わるたび

function render() {
  // ここで現在のURLを見て表示を更新する
}

render();                                      // 初回ロード
window.addEventListener("popstate", render);   // 戻る/進む（pushStateした履歴へ戻ったときも）
window.addEventListener("hashchange", render); // ハッシュ変更

// 自分でURLを書き換えるときは popstate が発火しないので render() を呼ぶ
function navigate(url) {
  history.pushState(null, "", url);
  render();
}