带有按钮的HTML两种语言选项（无需重定向到其他页面）
[英]Html two language option with button (without having to redirect to different page )
问题描述
I'm trying to make second language option to the website. 
我正在尝试为网站提供第二语言的选择。 Here are the details for the project : 以下是该项目的详细信息：
1) I'm not trying to use Google translator system or any other auto translator service to change the entire website language. 1）我不打算使用Google翻译系统或任何其他自动翻译服务来更改整个网站的语言。
2) I only trying to translate the main description part in the website. 2）我只尝试翻译网站上的主要描述部分。
3) I already have written and saved translated version of the description text. 3）我已经编写并保存了描述文本的翻译版本。
4)I also made a dropdown language option button in a separate file but under same template for both language. 4）我还在一个单独的文件中创建了一个下拉语言选项按钮，但是在两种语言的相同模板下。
So, to make it clear, my question is : 因此，为了明确起见，我的问题是：
How can I use language option button to switch the language between English and Korean (from English to Korean, and from Korean to English depending on what user select) with the translated description text I have? 我如何使用语言选项按钮将我拥有翻译后的描述文字的语言在英语和韩语之间切换（从英语到韩语，从韩国语到英语，具体取决于用户选择的语言）？
----- code below is the dropdown language option button ---------------- -----下面的代码是下拉语言选项按钮----------------
<!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>
2 个解决方案
解决方案1
0 2018-10-27 16:27:51
Javascript is your best bet. Javascript是最好的选择。 In your <li> tags, you want to add an onclick event listener so that you can change the text of an HTML element when you select a list item. 您要在<li>标记中添加一个onclick事件侦听器，以便在选择列表项时可以更改HTML元素的文本。
<li onclick="toggleLanguage('English')"><a href="#">English</a></li>
<li onclick="toggleLanguage('English')"><a href="#">Korean</a></li>
Here, the onclick attribute calls the function: function toggleLanguage(language) . 在这里， onclick属性调用函数： function toggleLanguage(language) 。
Next, create a <script> tag after the body to call your javascript code. 接下来，在正文之后创建一个<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>
This function accesses the element that you want to change the text to. 此函数访问您想要将文本更改为的元素。 In this case, I created an h1 tag with an id="description" . 在这种情况下，我创建了一个带有id="description"的h1标签。
Here is an example of the all the changes: 这是所有更改的示例：
<!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>
解决方案2
0 已采纳 2018-10-27 18:26:51
This is how i do it when i build a multi-lingual website. 这是我建立多语言网站时的做法。 I put notes inside the code for clarification. 我将注释放在代码中以进行澄清。
<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>
Hope it solve your problem. 希望它能解决您的问题。
(since i don't speak Korean i used google-translate for the example) （因为我不会说韩语，所以我以google-translate为例）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.