html 在双语网站中保留语言 [英] html keep language in bilingual site

问题描述

我在一个双语网站(西班牙语/英语)上工作，我接受了第二个答案的建议 在这篇文章中.

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

<a class="nav-link dropdown-toggle";id="dropdown06";数据切换=下拉"aria-haspopup="true";aria-expanded="false"><span lang="es">成语</span><span lang="en">Language</span></a><div class="下拉菜单";aria-labelledby="dropdown06"><a class="dropdown-item coll-navbar language"><span lang="es">英语</span><span lang="en">Español</span></a>

这是js代码:

$('[lang="en"]').hide();$('.language').click(function() {$('[lang="es"]').toggle();$('[lang="en"]').toggle();});

这是一个实现代码的例子:

<h2 class="align-center";lang=es"><strong>Costura<h2 class="align-center";lang=en"><strong>缝纫

而且，它工作得很好，唯一的问题是当我选择第二种语言并更改 html 页面时，它返回到第一个(在这种情况下是西班牙语)；选择后，如何在所有 html 中保留第二种语言?

提前致谢，

解决方案

方法一:

您可以使用 Jquery Cookie 来保存语言值.

$('[lang="en"]').hide();$('.language').click(function() {$('[lang="es"]').toggle();$('[lang="en"]').toggle();if ($.cookie('lang') === 'en') {$.cookie('lang', 'es', { expires: 7 });} 别的 {$.cookie('lang', 'en', { expires: 7 });}});

然后运行以下代码块以在页面加载时检查任何 lang 值:

if ($.cookie('lang')) {var lang = $.cookie('lang');document.documentElement.setAttribute('lang', lang);} 别的 {document.documentElement.setAttribute('lang', 'en');

方法二:

使用本地存储 API 解决问题:

<头><身体><li class="nav-item dropdown"><a class="nav-link dropdown-toggle";id="dropdown06";数据切换=下拉"aria-haspopup="true";aria-expanded="false"><span lang="es">成语</span><span lang="en">Language</span></a><div class="下拉菜单";aria-labelledby="dropdown06"><a class="dropdown-item coll-navbar language"><span lang="es">英语</span><span lang="en">Español</span></a>

<div class="title col-12 col-md-8"><h2 class="align-center";lang=es"><strong>Costura<h2 class="align-center";lang=en"><strong>缝纫

<script src=https://code.jquery.com/jquery-3.5.1.min.js"></script><script type="text/javascript">var lang = localStorage.getItem(lang");如果(语言){如果(朗==en"){$('[lang="en"]').show();$('[lang="es"]').hide();}别的{$('[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();} 别的 {localStorage.setItem('lang', 'es');$('[lang="es"]').show();$('[lang="en"]').hide();}});</html>

I'm working on a bilingual site (spanish/english), I took the advice from the 2nd answer in this post.

This is the bit of code in the navbar that I use to pick a 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>

And this is the js code:

$('[lang="en"]').hide();
$('.language').click(function() {
  $('[lang="es"]').toggle();
  $('[lang="en"]').toggle();
});

This is an example of the code implemented:

<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>

And, it works great, the only problem is that when I choose the 2nd language and I change the html page, it returns to the first one (spanish in this case); how can I keep, when selected, the 2nd language across all the html's?

Thanks in advance,

解决方案

Method 1:

You can use Jquery Cookie to persist the language values.

$('[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 });
  }
});

Then run the below code block to check for any lang values when the page loads:

if ($.cookie('lang')) {
    var lang = $.cookie('lang');
    document.documentElement.setAttribute('lang', lang);
} else {
    document.documentElement.setAttribute('lang', 'en');

Method 2:

Use Local Storage API to resolve the issue:

<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>

这篇关于html 在双语网站中保留语言的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！