带按钮的 Html 两种语言选项(无需重定向到不同的页面) [英] Html two language option with button (without having to redirect to different page )
问题描述
我正在尝试为网站提供第二语言选项.以下是该项目的详细信息:
1) 我不想使用 Google 翻译系统或任何其他自动翻译服务来更改整个网站的语言.
2) 我只尝试翻译网站中的主要描述部分.
3) 我已经编写并保存了描述文本的翻译版本.
4) 我还在一个单独的文件中制作了一个下拉语言选项按钮，但在两种语言的相同模板下.
所以，为了清楚起见，我的问题是:
如何使用语言选项按钮来切换语言英语和韩语(从英语到韩语，从韩语到英语，具体取决于用户选择的内容)以及我的翻译描述文本?
-----下面的代码是下拉语言选项按钮----------------
<头><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><身体><div class="容器"><div class="下拉"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">语言选项<span class="caret"></span></button><ul class="下拉菜单"><li><a href="#">英语</a></li><li><a href="#">韩语</a></li></html>
这就是我在构建多语言网站时的做法.我在代码中添加了注释以进行说明.
希望它能解决您的问题.
(因为我不会说韩语，所以我用 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屋！
