Web 开发显示/隐藏 <div> 刷新后答案

【问题标题】：Web development show/hide <div> after refreshWeb 开发显示/隐藏 <div> 刷新后
【发布时间】：2015-03-25 20:14:13
【问题描述】：

我正在为一家餐厅开发一个网站，该网站的标题带有以下标签：

“家”
“菜单”
“关于”

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

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

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

【问题讨论】：

localStorage 的替代方法是使用location 对象提供的位置哈希。当单击带有href 或#yourtab 的链接时，它不会使页面加载，但是，它会改变url。刷新页面时，哈希不会丢失，您可以确定您所在的选项卡。

标签： javascript jquery html web show-hide

【解决方案1】：

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

像这样：

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

在页面加载时，您可以做一些错误处理，以防这些属性从未设置，如下所示：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

一种方法是使用本地存储。只需单击其中一个标题选项卡，即可使用 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。

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

参考资料：

【讨论】：

【解决方案4】：

你测试过标签的onload吗？

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

像这样：

网页代码...

函数加载类（）{ JQuery 在这里更改.. }

【讨论】：