我正在开发一个双语网站（西班牙语/英语），我采纳了第二个答案的建议在这篇文章中 https://stackoverflow.com/questions/32008125/using-javascript-to-change-website-language.
这是导航栏中我用来选择语言的代码：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span lang="es">Idioma</span>
<span lang="en">Language</span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown06">
<a class="dropdown-item coll-navbar language">
<span lang="es">English</span>
<span lang="en">Español</span>
</a>
</div>
</li>
这是js代码：
$('[lang="en"]').hide();
$('.language').click(function() {
$('[lang="es"]').toggle();
$('[lang="en"]').toggle();
});
这是实现的代码示例：
<div class="title col-12 col-md-8">
<h2 class="align-center" lang="es"><strong>
Costura</strong></h2>
<h2 class="align-center" lang="en"><strong>
Sewing</strong></h2>
</div>
而且，它工作得很好，唯一的问题是，当我选择第二种语言并更改 html 页面时，它会返回到第一个语言（在本例中为西班牙语）；选择后，如何在所有 html 中保留第二种语言？
提前致谢，
方法一：
您可以使用Jquery Cookie https://plugins.jquery.com/cookie/坚持语言价值观。
$('[lang="en"]').hide();
$('.language').click(function() {
$('[lang="es"]').toggle();
$('[lang="en"]').toggle();
if ($.cookie('lang') === 'en') {
$.cookie('lang', 'es', { expires: 7 });
} else {
$.cookie('lang', 'en', { expires: 7 });
}
});
然后运行下面的代码块来检查是否有任何lang页面加载时的值：
if ($.cookie('lang')) {
var lang = $.cookie('lang');
document.documentElement.setAttribute('lang', lang);
} else {
document.documentElement.setAttribute('lang', 'en');
方法二：
使用本地存储API解决问题：
<html>
<head>
</head>
<body>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span lang="es">Idioma</span>
<span lang="en">Language</span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown06">
<a class="dropdown-item coll-navbar language">
<span lang="es">English</span>
<span lang="en">Español</span>
</a>
</div>
</li>
<div class="title col-12 col-md-8">
<h2 class="align-center" lang="es"><strong>
Costura</strong></h2>
<h2 class="align-center" lang="en"><strong>
Sewing</strong></h2>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var lang = localStorage.getItem("lang");
if (lang){
if (lang == "en"){
$('[lang="en"]').show();
$('[lang="es"]').hide();
}else{
$('[lang="es"]').show();
$('[lang="en"]').hide();
}
}
$('.language').click(function() {
$('[lang="es"]').toggle();
if (lang === 'en') {
localStorage.setItem('lang', 'en');
$('[lang="en"]').show();
$('[lang="es"]').hide();
} else {
localStorage.setItem('lang', 'es');
$('[lang="es"]').show();
$('[lang="en"]').hide();
}
});
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
