Öffnen Sie die Seite auf einer bestimmten Registerkarte mithilfe des URL-Hashs

Question

Zugegebenermaßen bin ich etwas ratlos, da ich mit Hashes noch sehr neu bin, aber ich denke, dass dies eine Lösung für mein Problem sein könnte, daher hoffe ich, dass hier jemand mehr Einblick hat. Ich habe eine Webseite mit mehreren „Registerkarten“ (ein Div, das Informationen verbirgt, bis auf die Schaltfläche geklickt wird, und ein Div, das alle anderen Informationen verbirgt, bis auf die Schaltfläche geklickt wird) und ich möchte in der Lage sein, von verschiedenen Webseiten aus eine bestimmte Registerkarte zu öffnen .< ;/p>

Dies ist das Grundgerüst der vorherigen Webseite. Wenn Sie regelmäßig zur Seite navigieren, ist das erste Div standardmäßig sichtbar.

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

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

<div id="third" class="commission"
Inhalt
</div>

Auf dieser Seite gibt es Schaltflächen, auf die Sie klicken können, um zwischen diesen Divs zu wechseln.

<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>

Das Javascript zum Umschalten zwischen diesen lautet:

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

Irgendwie möchte ich diese Schaltflächen auf einer anderen Seite („index.html“) platzieren, aber wenn Sie auf „dritte“ klicken, werden Sie zu einer neuen Seite („commissiontypes.html“) weitergeleitet, stattdessen „dritte“. der Standardeinstellung „Erster“.

Wenn es außer der Verwendung von Hashes noch andere Lösungen gibt, würde ich gerne davon hören, danke, dass Sie sich das genauer angesehen haben.

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 = '';

（或者，您也可以考虑使用查询参数来指示该部分。）