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

Question

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

dub*_*boo 3 html javascript css language-switching web

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

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

A. *_*shu 5

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

\n\n

<form>\n    <label for="lang-switch">\n        <span lang="ko">\xec\x96\xb8\xec\x96\xb4</span>\n        <span lang="en">Language</span>\n    </label>\n    <select id="lang-switch">\n        <option value="en">English</option>\n        <option value="ko" selected>\xed\x95\x9c\xea\xb5\xad\xec\x96\xb4</option>\n    </select>\n</form>\n\n<p>\n    <span lang="ko">\xed\x95\x9c\xea\xb5\xad\xec\x96\xb4 \xed\x85\x8d\xec\x8a\xa4\xed\x8a\xb8</span>\n    <span lang="en">Text in English</span>\n</p>\n\n<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>\n<script>\n$(\'[lang]\').hide(); // hide all lang attributes on start.\n$(\'[lang="ko"]\').show(); // show just Korean text (you can change it)\n$(\'#lang-switch\').change(function () { // put onchange event when user select option from select\n    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)\n    switch (lang) {\n        case \'en\':\n            $(\'[lang]\').hide();\n            $(\'[lang="en"]\').show();\n        break;\n        case \'ko\':\n            $(\'[lang]\').hide();\n            $(\'[lang="ko"]\').show();\n        break;\n        default:\n            $(\'[lang]\').hide();\n            $(\'[lang="ko"]\').show();\n        }\n});\n</script>\n

Run Code Online (Sandbox Code Playgroud)\n\n

希望它能解决您的问题。

\n\n

（因为我不会说韩语，所以我使用谷歌翻译作为例子）

\n

归档时间：	7 年前
查看次数：	45719 次
最近记录：	7 年前