javascript - 带有按钮的 Html 两种语言选项(无需重定向到不同的页面)

标签 javascript html css web language-switching

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

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>

最佳答案

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

<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 作为示例)

关于javascript - 带有按钮的 Html 两种语言选项(无需重定向到不同的页面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53021813/

相关文章:

CSS 自动换行在 Chrome 中不起作用

javascript - 绝对div中的jQuery滚动条插件

javascript - Windows Phone IE Mobile - 如何禁止创建自动 URL(地址和电话号码)?

悬停时的 HTML/CSS 菜单和激活的菜单不会显示

html - div 左侧不需要的空间

html - CSS 属性 "inline"没有给我在网页中换行

javascript - 使用 redux 进行服务端渲染

javascript - 使用 jQuery 将宽度从 100% 更改为自动时的 css 转换不起作用

html - 如何在不使用填充/边距的情况下设置内部 div 的边距

javascript - 用重复的线性渐变颜色填充 SVG 元素