3

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

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>

4

2 回答 2

3

当我建立一个多语言网站时，我就是这样做的。我在代码中添加了注释以进行澄清。

<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>한국어&lt;/option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트&lt;/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>

希望它能解决你的问题。

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

于 2018-10-27T18:26:51.013 回答
1

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>

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

以下是所有更改的示例：

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

于 2018-10-27T16:27:51.037 回答