刷新html页面时如何留在当前选项卡上？答案

【问题标题】：How to stay on current tab when refreshing html page?刷新html页面时如何留在当前选项卡上？
【发布时间】：2017-04-17 14:16:12
【问题描述】：

在 html 中创建选项卡时，我可以将巴黎选项卡设置为活动（在 html 中使用“style="display: block;" 硬编码）。因此，当页面加载时，活动选项卡（巴黎）将显示。

问题

当我点击不同的标签（伦敦）并点击刷新时，它再次显示巴黎。如何点击刷新并显示当前处于活动状态的选项卡的信息？而不是让我回到定义的选项卡。也许 javascript 或 jquery 可以解决我的问题？

<!DOCTYPE html>
    <html>
    <head>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent" style="display: block;>
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <script>
    function openCity(evt, cityName) {
        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(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>

    </body>
    </html>

Plunker View

示例图片

目前在伦敦，如果我点击刷新，它应该会显示伦敦的详细信息。如果是巴黎或东京，也应该可以。

【问题讨论】：

在 url 中传递选项卡名称作为查询参数
将其保存到 cookie 中，然后在打开页面时读取 cookie，如果 cookie 存在则读取并选择该选项卡。
嘿，迈克，刚刚修改了您创建的 plunker 以使用 cookie 来存储和读回该 cookie，以便在页面加载时选择最后选择的选项卡。让我知道这是否是你所追求的。

标签： javascript jquery html

【解决方案1】：

这是您发布的修改后的 plunker：

// your code

    // After you have your tab selected save it to a cookie (change expiration to something that makes sense to you.
    document.cookie = "cityName="+cityName+"; expires=Thu, 18 Dec 2090 12:00:00 UTC; path=/";
}


document.addEventListener("DOMContentLoaded", function(){
  // When  you load the page check if the cookie is there and read it back
  var selectedCity = getCookie("cityName");
  // if there is a selected city then select it. Notice that I added id's to each link with the city name.
  if (selectedCity != ""){
    document.getElementById(selectedCity).click();
  }
});
// Helper function to get the cookie value from the document.cookie string.
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

https://plnkr.co/edit/sCRfBsFRgdQ0wPKI9CMb?p=preview

希望对你有帮助！

【讨论】：

如果我在“伦敦”选项卡上点击刷新，我仍会返回“巴黎”选项卡。我尝试从巴黎删除“style=display:block”。但是当刷新伦敦选项卡时不再活动。（使用您提供的代码和 Chrome）。但在 IE 上它按预期工作。
你真是太棒了，正是我需要的完美工作！

【解决方案2】：

您可以使用 cookie 来存储当前选项卡值并在页面加载时检索它。如果没有找到 cookie，它将选择默认选项卡。

您可以将此库用于 cookie 或使用 javascript 默认函数。

https://github.com/js-cookie/js-cookie

<script>
document.addEventListener("DOMContentLoaded", function(){
   var activeCity = Cookies.get('city');
   if (activeCity){
     document.getElementById(activeCity).click();
   }
});

function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    Cookies.set('city', cityName, { expires: 7 }); //added new line
}
</script>

【讨论】：