Web 开发 show/hide <div> 刷新后

Question

我正在为一家餐厅开发网站，该网站 header 包含以下选项卡：

"home"
"menu"
"about"

我想在同一页面中切换选项卡，但只根据所选选项卡更改内容。

我通过隐藏 <div> 并通过添加和删除类来显示我想要的 jQuery 来做到这一点。问题是每当我刷新页面时，它 returns 到设置为在加载页面时显示的主主页。

所以我的问题是：有没有办法让网页刷新类所做的更改？？？

Answer 1

您需要在重新加载之间保持状态，这通常通过会话或 cookie 来完成。

您的服务器端语言应该有相应的方法。例如 sessions 为 PHP。或者您可以在本地使用 cookie。

Answer 2

无需涉及后端的任何工作，您可以通过 localStorage 存储该信息。

像这样：

localStorage.setItem("currentPage", "HomePage");
localStorage.setItem("favoriteColor", "Red");

在页面加载时，如果这些属性从未设置过，您可以进行一些错误处理，例如：

if(!localStorage.getItem("currentPage"))
{
    localStorage.setItem("currentPage", "HomePage");
}

Answer 3

你测试过标签的加载了吗？

尝试将您的 class 更改放在 javascript 函数上，并使用 onload 在 body 标记中执行该函数。

像这样：

网页代码...

函数 loadClasses(){ JQuery 此处更改.. }

Answer 4

一种方法是使用本地存储。只需单击您的 header 选项卡之一，即可使用 JavaScript 在本地存储中保存一些内容。像这样：

    localStorage.setItem('page', 'home');

您可以通过再次调用并向其传递新值来覆盖该值。

为所有 div 设置 display: none;，并根据您的本地存储值显示它们。在页面加载时，您可以获得该值并显示与本地存储值具有相同 ID 的 div，如下所示：

    var page = localStorage.getItem("page");
    if(page){
        // change the tab based on page's value
        $('div#' + page).show();
    }else{
        // Go to your default page, assuming its default is home page
        $('div#home').show();
    }

您始终可以使用 Chrome 开发人员工具 > 资源 > 本地存储查看保存在本地存储中的内容。

请记住，您只能在本地存储中存储字符串值。但是绕过它的方法是存储 JSON.stringify 和 JSON.parse。

如果您想了解有关浏览器支持或其他任何内容的更多信息，您可以随时阅读有关本地存储的更多信息：

参考文献：

Web 开发 show/hide <div> 刷新后

Web development show/hide <div> after refresh

html

javascript

jquery

show-hide

web