带按钮的Html两种语言选项（无需重定向到不同的页面） [英] Html two language option with button (without having to redirect to different page )
问题描述
我正在尝试为网站制作第二语言选项。
以下是该项目的详细信息：
1）我不是试图使用谷歌翻译系统或任何其他自动翻译服务来更改整个网站语言。
2）我只试图翻译网站中的主要描述部分。
3）I已经编写并保存了描述文本的翻译版本。
4）我还在一个单独的文件中创建了一个下拉语言选项按钮，但是在两种语言的相同模板下。 / p>
所以，为了说清楚，我的问题是：
如何使用语言选项按钮切换
英语和韩语之间的语言（从英语到韩语，从韩语到英语，取决于用户选择的内容）和我翻译的描述文字？
- ----下面的代码是下拉语言选项按钮----------------
<！DOCTYPE html> < HTML> < HEAD> <标题>< /标题> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =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> < /头> <身体GT; < div class =container> < div class =dropdown> < button class =btn btn-default dropdown-toggletype =buttondata-toggle =dropdown>语言选项< span class =caret>< / span>< / button> < ul class =dropdown-menu> < li>< a href =＃>英文< / a>< / li> < li>< a href =＃>韩国< / a>< / li> < / UL> < / DIV> < / DIV> < /体> < / html>
<当我建立一个多语种网站时，我就是这样做的。我在代码中添加了注释以便澄清。
< form>
< label for =lang-switch>
< span lang =ko>언어< / span>
< span lang =en>语言< / span>
< / label>
< select id =lang-switch>
< option value =en>英文< /选项>
< option value =ko已选择>한국어< / option>
< / select>
< / form>
< p>
< span lang =ko>한국어텍스트< / span>
< span lang =en>英文文本< / span>
< / p>
< script src =https://code.jquery.com/jquery-2.2.4.min.jsintegrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =crossorigin =anonymous> ;< /脚本>
< script>
$（'[lang]'）。hide（）; //在开始时隐藏所有lang属性。
$（'[lang =ko]'）。show（）; //只显示韩文（可以更改）
$（'＃lang-switch'）。change（function（）{//当选择
var lang =中的用户选择选项时放置onchange事件$（this）.val（）; //决定使用switch case显示哪种语言。其余的很明显（我认为）
switch（lang）{
case'en'：
$（'[lang]'）。hide（）;
$（'[lang =en]'）。show（）;
break;
case'ko'：
$（'[lang]'）。hide（）;
$（'[lang =ko]'）。show（）;
break;
默认值：
$（'[lang]'）。hide（）;
$（'[lang =ko]'）。show（）;
}
}）;
< / script>
希望它能解决您的问题。
（因为我不会说韩语，我使用google-translate作为例子）
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.
2) I only trying to translate the main description part in the website.
3) I already have written and saved translated version of the description text.
4)I also made a dropdown language option button in a separate file but under same template for both language.
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>
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)
这篇关于带按钮的Html两种语言选项（无需重定向到不同的页面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
