双语网站中的html语言_Html_Jquery

双语网站中的html语言

html jquery

双语网站中的html语言,html,jquery,Html,Jquery,我在一个双语网站上工作（西班牙语/英语），我接受了第二个答案的建议这是导航栏中我用来选择语言的代码位： <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-ex

我在一个双语网站上工作（西班牙语/英语），我接受了第二个答案的建议

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

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



肋骨

缝纫

而且，它工作得很好，唯一的问题是，当我选择第二种语言并更改html页面时，它会返回到第一种语言（本例中为西班牙语）；选择后，如何在所有html中保留第二种语言

提前感谢，

方法1:

您可以使用来持久化语言值

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

方法2:

使用本地存储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>



习语
语言
英语
西班牙人


肋骨

缝纫
var lang=localStorage.getItem（“lang”）；
如果（朗）{
如果（lang==“en”）{
$（'[lang=“en”]'）。show（）；
$（'[lang=“es”]'）。隐藏（）；
}否则{
$（'[lang=“es”]'）。show（）；
$（'[lang=“en”]'）。隐藏（）；
}
}
$（'.language'）。单击（函数（）{
$（'[lang=“es”]'）。toggle（）；
如果（lang=='en'）{
setItem（'lang'，'en'）；
$（'[lang=“en”]'）。show（）；
$（'[lang=“es”]'）。隐藏（）；
}否则{
setItem（'lang'，'es'）；
$（'[lang=“es”]'）。show（）；
$（'[lang=“en”]'）。隐藏（）；
}
});

这是我得出的解决方案，主要基于@HarshanaSerasinghe第二个答案：

<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();
        }
    } else {
        $('[lang="en"]').hide();
        localStorage.setItem('lang', 'es');
    };
    $('.language').click(function() {
        $('[lang="es"]').toggle();
        $('[lang="en"]').toggle();
        if (lang === 'en') {
            localStorage.setItem('lang', 'es');
        } else {
            localStorage.setItem('lang', 'en');
        }
    });
</script>


var lang=localStorage.getItem（“lang”）；
如果（朗）{
如果（lang==“en”）{
$（'[lang=“en”]'）。show（）；
$（'[lang=“es”]'）。隐藏（）；
}否则{
$（'[lang=“es”]'）。show（）；
$（'[lang=“en”]'）。隐藏（）；
}
}否则{
$（'[lang=“en”]'）。隐藏（）；
setItem（'lang'，'es'）；
};
$（'.language'）。单击（函数（）{
$（'[lang=“es”]'）。toggle（）；
$（'[lang=“en”]'）。toggle（）；
如果（lang=='en'）{
setItem（'lang'，'es'）；
}否则{
setItem（'lang'，'en'）；
}
});

如果没有单击

.language

，则

lang

中没有任何值，因此，当我加载站点时，出现了两种语言，我通过添加一个else子句隐藏一种语言并为

lang

变量设置一个值来解决这个问题。

onclick

，首先我切换了两种语言，然后我相应地修改了

lang

中的值，为什么不在URL中使用查询参数呢？通过以下示例，您可以通过JavaScript访问参数：我还应该补充一点，您使用Node.js对其进行标记，但您的代码是jQuery。你是在使用Node还是只是制作一个普通的HTML站点，然后上传到web服务器上？谢谢Tony Drummond，我把标签改成了jQuery，我正在制作一个普通的HTML站点，然后上传到web服务器上。如果你只是上传普通的HTML页面，那么这个站点一定很小。请记住，您还必须更改每个链接。我想您可以编写一个简单的jQuery函数，将单击事件添加到所有链接$（“a”）。单击（函数（e）…）然后执行e.preventDefault（），获取URL并通过JavaScript进行修改，然后执行window.location.replace（URL）。。。导航到页面。谢谢，我下载了jquery.cookie.js，在jquery库之后添加了引用，修改了您编写的第一部分，但当页面加载时，我无法运行第二部分（我在head中尝试了一个函数，在正文末尾的所有js引用之后，在单独的js文件中…），你能告诉我如何运行它吗？我已经编辑了答案并添加了一个新方法。你也可以使用第二种方法。谢谢@Harshana，我使用你的第二种方法来找到我发布的解决方案。

<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();
        }
    } else {
        $('[lang="en"]').hide();
        localStorage.setItem('lang', 'es');
    };
    $('.language').click(function() {
        $('[lang="es"]').toggle();
        $('[lang="en"]').toggle();
        if (lang === 'en') {
            localStorage.setItem('lang', 'es');
        } else {
            localStorage.setItem('lang', 'en');
        }
    });
</script>