当我们更改页面时继续相同的显示和隐藏 div答案

【问题标题】：continue with same Show and hide divs when we change page当我们更改页面时继续相同的显示和隐藏 div
【发布时间】：2025-12-10 12:35:01
【问题描述】：

我在我的主页中使用一个函数。一切正常，我只想知道如何使用该功能：

localStorage.setItem("language", selectedLanguage);

currentlanguage= localStorage.getItem("language");

我的目标是当我点击一个链接并进入另一个页面时，将所选语言保留在一个页面中。

例如 id="en" 是默认语言，但如果我想在我的主页中使用 id="fr"，然后点击链接谁会在另一个页面中发送给我。我会回到 id="en"。那么如何使用 localStorage 来保持相同的语言呢？

这是我使用的函数的 jsfiddle：

https://jsfiddle.net/kodjoe/chvw181j/

这是我的 HTML 代码

<a class="button" id="en">EN</a>
<a class="button" id="fr">FR</a>
<a class="button" id="de">DE</a>


<div class="lan en">1</div>
<div class="lan fr">2</div>
<div class="lan de">3</div>
<div class="lan en">4</div>
<div class="lan fr">5</div>
<div class="lan de">6</div>

这是我的 JS

$(document).ready(function() {
$('.lan').hide();
$('.en').show();
});

$('.button').click(function(event) {
$('.lan').hide();
var selectedLanguage = $(this).attr('id');
var setActiveLanguage = "." + selectedLanguage;
$(setActiveLanguage).show();

localStorage.setItem("language", selectedLanguage);
currentlanguage= localStorage.getItem("language");
});

这是我的 CSS

.button { cursor:pointer; padding: 0px 30px; }

【问题讨论】：

您需要存储活动语言，可能使用localStorage
你可以，但我猜你需要某种本地存储或会话
正如@depperm 建议的那样：localStorage 甚至可能是cookies ...在链接中保留语言也是一种选择，但我永远不会推荐它。

标签： javascript jquery html css show-hide

【解决方案1】：

localStorage.setItem("language", selectedLanguage);

currentlanguage= localStorage.getItem("language");

【讨论】：

您可以在任何页面上使用localStorage.getItem('language') 来获取当前语言
在这个示例中，我的代码中没有使用语言，我需要在某处添加它吗？
它可以是你想要的任何名称，一旦设置了 localStorage 变量在任何页面中都可用
所以如果我理解得很好，我需要把这部分代码放在我所有页面的javascript部分中，就像我做的那样？我更新了我的问题并在我的 js 部分的末尾添加了函数
它就像 cookie，一旦你设置了变量 localStorage.setItem("language", selectedLanguage);可以使用 localStorage.getItem("language") 在任何页面中访问该值。无需放入所有页面

【解决方案2】：

您可以使用SessionStorage 来保存您的数据（例如选择的语言）。然后用 if 子句扩展你的函数来设置正确的显示/隐藏状态。

【讨论】：

【解决方案3】：

您可以使用 localStorage，但我只是将代码放在您希望包含任何全局脚本的文件中，因为您将拥有或已经拥有适用于整个应用程序的其他脚本。然后在您的脑海中链接该文件（您可能会为您的标题内容使用某种包含）。

<script src="js/globalScripts.js"></script>

//globalScripts.js

$(document).ready(function() {
    $('.lan').hide();
    $('.en').show();
});

$('.button').click(function(event) {
    $('.lan').hide();
    var selectedLanguage = $(this).attr('id');
    var setActiveLanguage = "." + selectedLanguage;
    $(setActiveLanguage).show();
});

【讨论】：