时间戳

首页 > 解决方案 > html在双语网站中保持语言

html - html在双语网站中保持语言

问题描述

我正在开发一个双语网站（西班牙语/英语），我从这篇文章的第二个答案中得到了建议。

这是我用来选择语言的导航栏中的代码：

<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 中保留第二种语言？

提前致谢，

标签： htmljquery

解决方案

方法一：

您可以使用Jquery 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');

方法二：

使用 Local Storage 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>

推荐阅读