Web 开发在刷新后显示/隐藏

Web development show/hide <div> after refresh

本文关键字：显示 隐藏 刷新 开发 Web      更新时间：2023-09-26
。

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

  • "家">
  • "菜单">
  • "关于">

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

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

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

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

这样：

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

在页面加载时，如果从未设置过这些属性，则可以执行一些错误处理，如下所示：

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

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

您的服务器端语言应该有一个方法。 例如 PHP 的会话。 或者您可以在本地使用 Cookie。

一种方法是使用本地存储。只需单击其中一个标题选项卡，即可使用 JavaScript 在本地存储中保存某些内容。喜欢这个：

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

可以通过再次调用此值并将新值传入此值来覆盖此值。

为您的所有div 设置display: none;，并根据您的 loacal 存储值显示它们。在页面加载时，您可以获取值并显示与本地存储值具有相同 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 。

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

引用：

  • https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
  • https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
  • http://caniuse.com/namevalue-storage
  • 在 HTML5 本地存储中存储对象

您是否测试了标签的加载？

尝试将您的类更改放在 JavaScript 函数上，并使用 Onload 在 body 标签中执行该函数。

喜欢这个：

网页代码...

函数负载类(({ JQuery在这里发生了变化。 }

相关文章：