带有按钮的 HTML 两种语言选项（无需重定向到不同的页面）答案

【问题标题】：Html two language option with button (without having to redirect to different page )带有按钮的 HTML 两种语言选项（无需重定向到不同的页面）
【发布时间】：2019-03-31 23:40:54
【问题描述】：

我正在尝试为网站提供第二语言选项。以下是该项目的详细信息：

1) 我没有尝试使用谷歌翻译系统或任何其他自动翻译服务来更改整个网站的语言。

2) 我只是尝试翻译网站中的主要描述部分。

3) 我已经编写并保存了描述文本的翻译版本。

4）我还在一个单独的文件中创建了一个下拉语言选项按钮，但在两种语言的相同模板下。

所以，为了清楚起见，我的问题是：

如何使用语言选项按钮来切换语言英语和韩语（从英语到韩语，从韩语到英语，取决于用户选择的内容）以及我拥有的翻译描述文本？

-----下面的代码是下拉语言选项按钮----------------

    <!DOCTYPE html>
    <html>
    <head>
	    <title></title>

	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

    <div class="container">            
       <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">English</a></li>
          <li><a href="#">Korean</a></li>
        </ul>
      </div>
    </div>

    </body>
    </html>

【问题讨论】：

如果你打算使用任何 javascript 框架，你可以使用 i18 如果你想在纯 HTML 中做，你可以提供两个不同的静态文件，内容已更改。

标签： javascript html css web language-switching

【解决方案1】：

这就是我在构建多语言网站时的做法。我在代码中添加了注释以进行澄清。

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>

希望它能解决你的问题。

（因为我不会说韩语，所以我用谷歌翻译来举例）

【讨论】：

【解决方案2】：

Javascript 是您最好的选择。在您的<li> 标记中，您希望添加一个onclick 事件侦听器，以便您可以在选择列表项时更改HTML 元素的文本。

<li onclick="toggleLanguage('English')"><a href="#">English</a></li>
<li onclick="toggleLanguage('English')"><a href="#">Korean</a></li>

这里，onclick 属性调用函数：function toggleLanguage(language)。

接下来，在正文之后创建一个<script> 标记以调用您的javascript 代码。

<script>
    function toggleDescriptor(language) {
        let description = document.getElementById("description");
        if (language === "Korean") {
            description.innerHTML = "Show Korean Text";
        }
        else {
            description.innerHTML = "Show English Text";
        }  
    }
<script>

此函数访问您要将文本更改为的元素。在这种情况下，我创建了一个带有id="description" 的h1 标签。

以下是所有更改的示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
  <h1 id="description">Show English Text</h1>
   <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li onclick="toggleLanguage('English')"><a href="#">English</a></li>
      <li onclick="toggleLanguage('Korean')"><a href="#">Korean</a></li>
    </ul>
  </div>
</div>

</body>
<script>
  function toggleLanguage(language) {
    let description = document.getElementById("description");
    if (language === "Korean") {
      description.innerHTML = "Show Korean Text";
    }
    else {
      description.innerHTML = "Show English Text";
    }
  }
</script>
</html>

【讨论】：

谢谢！我尝试了这个解决方案，它奏效了！但是我还有一个问题要问你，如果我的 index.html 文件中有几个段落要翻译，那我需要多次使用 if 和 else 吗？所以我正在翻译常见问题部分，总共有 4 个问题。我希望语言选项按钮适用于整个常见问题解答部分。现在，我刚刚尝试了其中一个问题并使用您提供的解决方案进行了回答，但我不确定是否有任何方法可以做到，而不必再添加 5-6 个 if 和 else 语句。希望我的问题对你有意义，谢谢:)
没问题。如果要翻译多个元素，只需使用 document.getElementById("<id here>") 获取 DOM 元素，然后在 if 语句中，只需将每个 DOM 元素设置为相应的语言文本。不会有更多的 if/else 语句，因为 if/else 用于区分韩语和英语。相反，每个 if 语句下只会有更多行。
如果要翻译的文本很多，可以考虑将相应的文本放在不同的文件（JSON）中，并使用 XMLHttp（AJAX）动态加载文本。