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

Question

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

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

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

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

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

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

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

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

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

Answer 1

Javascript 是您最好的选择。在您的 <li> 标签中，您想添加一个 onclick 事件侦听器，以便您可以在 select 列表项时更改 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>

Answer 2

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

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

希望它能解决您的问题。

（因为我不会说韩语，所以我使用 google-translate 作为示例）

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

Html two language option with button (without having to redirect to different page )

html

javascript

css

language-switching

web