使用 URL 哈希在特定標籤上開啟頁面

Question

誠然，我對此有些失落，因為我對哈希很陌生，但我認為這可能是我問題的解決方案，所以我希望這裡的人可能有更多的見解。我有一個包含多個“選項卡”的網頁（在單擊按鈕之前隱藏信息的div，在單擊按鈕之前隱藏所有其他信息的div），我希望能夠從不同的網頁打開到特定選項卡.< ;/p>

這是以前網頁的骨架。當您定期導覽至該頁面時，第一個 div 預設可見。

<div id="first" class="commission">
content
</div>

<div id="second" class="commission" style="display:none;">
content
</div>

<div id="third" class="commission" style="display:none;">
content
</div>

在此網頁上有一些按鈕，您可以按一下這些按鈕在這些 div 之間切換。

<button class="commissiontab" onclick="commissionType(event, 'first')">first</button>
<button class="commissiontab" onclick="commissionType(event, 'second')">Second</button>
<button class="commissiontab" onclick="commissionType(event, 'third')">Third</button>

在這些之間切換的 javascript 如下：

function commissionType(evt, commissionName) {
  var i, commissiontab;
  var x = document.getElementsByClassName("commission");
  for (i = 0; i < x.length; i ) {
    x[i].style.display = "none";
  }
  commissiontab = document.getElementsByClassName("commissiontab");
  for (i = 0; i < x.length; i ) {
    commissiontab[i].className = commissiontab[i].className.replace(" selected", "");
  }
  window.scrollTo({ top: 0, behavior: 'smooth' });
  evt.currentTarget.className = " selected";
  document.getElementById(commissionName).style.display = "grid";
}

不知何故，我希望將這些按鈕放在不同的頁面（“index.html”）上，但是當您單擊“第三”時，您將進入新頁面（“commissiontypes.html”）選擇“第三”而不是預設的“第一”。

如果除了使用哈希之外還有其他解決方案，我很想聽聽，感謝您仔細查看。

Answer 1

您最初可以使用 'commission' 類別隱藏所有元素，然後在頁面載入時根據 location.hash 僅顯示其中一個元素。這樣，commissiontypes.html（和commissiontypes.html#first）將顯示第一個div，commissiontypes.html#second將顯示第二個div等

document.querySelectorAll('.commission').forEach(x => x.style.display = 'none');
const activeEl = document.querySelector(location.hash || '#first');
activeEl.style.display = '';

（或者，您也可以考慮使用查詢參數來指示該部分。）