如何在刷新html页面时保持当前选项卡？
在html中，当创建选项卡时，我可以将Paris选项卡设置为活动的（在html中用“style=”display：block；“硬编码）。因此，当页面加载时，活动选项卡（Paris）将显示。
问题
当我点击不同的标签（伦敦）并点击刷新，它再次显示巴黎。我如何才能点击刷新并显示当前活动的选项卡的信息？而不是将我带回定义的选项卡。也许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>
柱塞视图
示例图像
当前在伦敦，如果我点击刷新，它应该显示伦敦的详细信息。如果是巴黎或东京，也会起作用。
共有1个答案
这是你贴出的一个修改过的柱塞：
// 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=预览
希望有帮助！
-
成功登录验证后，我需要刷新主页。在这里，我使用下面的代码在成功登录后移动到下一页，并使用Firebase作为后端。 它只是打开主页而没有刷新。欢迎，如果有人能给我一个解决方案。
-
问题内容： 如何强制Web浏览器通过JavaScript硬刷新页面？ 硬刷新意味着获取页面的新副本并刷新所有外部资源（图像，JavaScript，CSS等）。 问题答案： 尝试使用： 当此方法接收一个值作为参数时，它将导致该页面始终从服务器重新加载。如果为false或未指定，浏览器 可能会 从其缓存中重新加载页面。
-
问题内容： 我是新手。我正在使用获取对象列表并将其显示在第一页上的服务。然后根据单击的对象，在下一页上设置选项卡标题。但是，当我刷新页面时，列表的范围丢失了，并且选项卡头引发了异常，导致页面无法显示信息。即使刷新第二页，是否可以保留上一个屏幕上单击了哪个对象的信息？ 问题答案： 您可以使用角度本地存储 角度本地存储 示例如何使用它： 使用本地存储的示例
-
本文向大家介绍vue单页面实现当前页面刷新或跳转时提示保存，包括了vue单页面实现当前页面刷新或跳转时提示保存的使用技巧和注意事项，需要的朋友参考一下 前言 最近公司vue项目中有一个需求，需要在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失。刚开始思考觉得很简单，直接在Router的钩子中判断就好了，但是会发现还有新的问题存在，浏览器刷新和当前页面关闭的时候无法监听，最终用w
-
问题内容： Redux文档的第一个原理是： 整个应用程序的状态存储在单个存储中的对象树中。 我实际上以为我很好地理解了所有原则。但是我现在对应用程序的含义感到困惑。 我知道，如果应用程序只是网站中复杂的小部分之一，并且仅用一页即可工作。但是，如果申请意味着整个网站怎么办？我应该使用LocalStorage还是cookie或其他保留状态树的东西？但是如果浏览器不支持LocalStorage怎么办？
-
问题内容： 有人可以告诉我我在做什么错吗？我需要在一段时间后刷新页面，但是它会刷新到页面顶部，我需要不更改页面位置！所以这是我现在无法使用的，是meta标签吗？这是我所没有的仍然不刷新必须做错了什么吗？ 这是我本来的… 阅读了一些初始答案后，我将其更改为… 问题答案： 更新 您可以使用下面提到的方法代替下面的强制技巧。 将HTML替换为：