链接到页面并显示特定选项卡内容

Question

我不太了解 Javascript，我正在使用从 Internet 上下载的一些示例 javascript 选项卡代码。我有一个包含许多标签（年）的页面（旅行）。每个选项卡在同一页面中打开不同的内容（指向照片库的链接）。单击后，每个画廊都会在新页面中打开。在那个新页面上，我想链接回 Travel 页面并显示特定选项卡的内容（用户查看的同一年）。

我正在使用 Bootstrap 4.5.0 在本地主机上运行（Win10）

来自旅行页面的代码

<div class="tab">
  <button class="tablinks" onClick="openYear(event, 'A few words')" id="defaultOpen">A few words</button>
  <button class="tablinks" onClick="openYear(event, '2002')">2002</button>
  <button class="tablinks" onClick="openYear(event, '2003')">2003</button>
</div>

<div id="2002" class="tabcontent">

    <h2>2002</h2>
    <div class="row">

      <div class="col-lg-4 col-sm-4 mb-4">
        <a href="travel-vienna02.html">Vienna, Austria<img class="img-fluid" src="images/travel/2002-vienna/vienna-9.jpg" alt=""></a>
        <a href="travel-vienna02.html"></a>
      </div>

      <div class="col-lg-4 col-sm-4 mb-4">
        <a href="travel-sicily1.html">Sicily (Savoca)<img class="img-fluid" src="images/travel/2002-sicily1/savoca17.jpg" alt=""></a>
        <a href="travel-sicily1.html"></a>
      </div>
      
      <div class="col-lg-4 col-sm-4 mb-4">
       <a href="travel-sicily2.html">Sicily (Cefalu)<img class="img-fluid" src="images/travel/2002-sicily2/cefalu01.jpg" alt=""></a>
        <a href="travel-sicily2.html"></a>
      </div>
</div><!-- /tab 2002-->

    <script>
    function openYear(evt, year) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(year).style.display = "block";
      evt.currentTarget.className += " active";
    }
    document.getElementById("defaultOpen").click();
    </script>

在“旅行”页面上，如果我选择第二个选项卡（“2002”），该页面会显示一系列链接。单击其中一个链接会打开一个新页面 - “Sicily1.html。在此页面上，我想创建一个链接并指向“travel.html”，并在加载时让该页面显示选项卡“2002”中的内容，不是默认选项卡内容。

谢谢

Answer 1

您可以在导航回“travel.html”时传递查询字符串参数：

<form action="travel.html?year=insert_year">
    <input type="submit" value="Go Back" />
</form>

并且在“travel.html”上，您可以添加一个事件监听器到页面加载并激活特定选项卡（如果存在于查询字符串参数中）：

document.addEventListener("DOMContentLoaded", function(){
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get('year');
    // activate tab
});