Question

我正在一家餐馆的网站上工作，该网站的标题包含以下标签：

＆＃34;家用＆＃34;
＆＃34;菜单＆＃34;
＆＃34;约＆＃34;

我希望在停留在同一页面时切换标签，但只根据所选标签更改其内容。

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

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

Answer 1

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

像这样：

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

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

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

Answer 2

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

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

Answer 3

你测试了标签的onload吗？

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

像这样：

网络代码......

function loadClasses（）{ JQuery在这里改变.. }

Answer 4

一种方法是使用本地存储。只需在您的某个标题选项卡单击时，使用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开发者工具＆gt;随时查看本地存储空间中保存的内容。资源＆gt;本地存储。

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

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

<强>参考文献：

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

4 个答案: