Question

我正在尝试使网站使用第二种语言。这是该项目的详细信息：

1）我不打算使用Google翻译系统或任何其他自动翻译服务来更改整个网站的语言。

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>

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

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两种语言选项（无需重定向到其他页面）

2 个答案: