html - 一页 html 静态多语言

Question

我有一项学校作业要创建单页 html 静态。 我想要一些按钮来更改语言，但我不想添加任何内容，例如 "index.html/en/" 或 "index.html?lang=en"。我更喜欢只使用 CSS 但我不知道它是否可行。

简而言之，我只想要一个简单的双语 “index.html” 并具有更改内容文本的按钮。

我是 html 脚本的新手，所以我正在寻找一些示例代码或一些详细的教程会有所帮助。

Answer 1

我建议为此使用 JS/jQuery:

为每个要翻译的元素进行语言映射:

// Translations object:
var translations = {
  'en': {
    'home': 'Home',
    'back': 'Back'
    /* ... */
  },
  'lt': {
    'home': 'Pradžia',
    'back': 'Atgal'
    /* ... */
  }
};


// wait for all DOM elements to load
$(document).ready(function() {

  // when button is clicked
  $('.lang-btn').click(function() {
    // take translations subset
    var lang = translations[$(this).data('lang')];

    // for each element that has "data-key" attribute
    $('[data-key]').each(function() {

      // change it's content to other language
      $(this).text(lang[$(this).data('key')]);
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-page">
  Language:
  <button class="lang-btn" data-lang="en">En</button>
  <button class="lang-btn" data-lang="lt">Lt</button>
  <hr/>
  <a href="home.html" data-key="home">Home</a>
  <button data-key="back">Back</button>
</div>

此代码不检查是否存在此类翻译。您可以通过回退到英语来改进此算法。