Buka halaman pada tab tertentu menggunakan cincang URL

Question

Diakui, saya agak tersesat mengenai perkara ini memandangkan saya sangat baru dengan cincangan, tetapi saya fikir ini mungkin penyelesaian kepada masalah saya, jadi saya berharap seseorang di sini mungkin mempunyai lebih banyak cerapan. Saya mempunyai halaman web dengan berbilang "tab" (div yang menyembunyikan maklumat sehingga butang diklik dan div yang menyembunyikan semua maklumat lain sehingga butang diklik) dan saya mahu dapat membuka tab tertentu daripada halaman web yang berbeza .< ;/p>

Ini ialah rangka halaman web sebelumnya. Apabila anda menavigasi ke halaman dengan kerap, div pertama kelihatan secara lalai.

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

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

<div id="ketiga"kelas="komisyen"style="paparan:tiada;">
kandungan
</div>

Pada halaman ini terdapat butang yang boleh anda klik untuk bertukar antara div ini.

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

Javascript untuk bertukar antara ini ialah:

function commissionType(evt, commissionName) {
  var i,tab suruhanjaya;
  var x = document.getElementsByClassName("komisen");
  untuk (i = 0; i < x.panjang; i++) {
    x[i].style.display = "tiada";
  }
  commissiontab = document.getElementsByClassName("tab komisen");
  untuk (i = 0; i < x.panjang; i++) {
    commissiontab[i].className = commissiontab[i].className.replace(" dipilih", "");
  }
  window.scrollTo({ atas: 0, tingkah laku: 'lancar' });
  evt.currentTarget.className += "
  document.getElementById(commissionName).style.display = "grid";
}

Entah bagaimana saya mahu meletakkan butang ini pada halaman lain ("index.html"), tetapi apabila anda mengklik pada "ketiga" anda dibawa ke halaman baharu ("commissiontypes.html") "Ketiga" sebaliknya daripada lalai "Pertama".

Jika terdapat penyelesaian lain selain menggunakan cincang, saya ingin mendengarnya, terima kasih kerana melihat dengan lebih dekat.

Answer 1

Anda boleh menggunakan 'commission' 类隐藏所有元素，然后在页面加载时根据 location.hash pada mulanya untuk memaparkan hanya satu elemen. Dengan cara ini, commissiontypes.html (dan commissiontypes.html#first) akan menunjukkan div pertama, commissiontypes.html#second akan menunjukkan div kedua, dll

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

(Sebagai alternatif, anda juga boleh mempertimbangkan untuk menggunakan parameter pertanyaan untuk menunjukkan bahagian ini.)