css 如何在网站中选择某个选项时更改网站上文本的语言

62o28rlo 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(151)

enter image description here我正在做一个类似于zoom launch meeting网页的项目。我想添加一个功能，如果我点击语言部分中的一个选项，它会将网页上的文本更改为使用JavaScript选择的语言。
该项目仅限于HTML、CSS、Bootstrap和JavaScript。我不知道如何附加的HTML，CSS和JavaScript文件到这个问题。

css

来源：https://stackoverflow.com/questions/76401253/how-to-change-the-language-of-text-on-a-website-when-an-option-is-selected-in-a

1条答案

按热度按时间

jjjwad0x1#

当然可以！如果你想在页面上呈现三行不同的文本，并根据所选语言更新它们，你可以修改代码如下：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Language App</title>
  <style>
    /* Your CSS styles here */
  </style>
</head>
<body>
  <h1 id="heading">Welcome!</h1>
  <p id="line1">This is line 1.</p>
  <p id="line2">This is line 2.</p>
  <p id="line3">This is line 3.</p>

  <select id="language-select" onchange="changeLanguage()">
    <option value="en">English</option>
    <option value="fr">French</option>
    <option value="de">German</option>
  </select>

  <script src="translate.json"></script>
  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js）：

function changeLanguage() {
  var select = document.getElementById("language-select");
  var language = select.value;

  fetch('translate.json')
    .then(response => response.json())
    .then(data => {
      var translations = data[language];

      var heading = document.getElementById("heading");
      var line1 = document.getElementById("line1");
      var line2 = document.getElementById("line2");
      var line3 = document.getElementById("line3");

      heading.innerText = translations.heading;
      line1.innerText = translations.line1;
      line2.innerText = translations.line2;
      line3.innerText = translations.line3;
    })
    .catch(error => {
      console.log('Error:', error);
    });
}

JSON（translate.json）：

{
  "en": {
    "heading": "Welcome!",
    "line1": "This is line 1.",
    "line2": "This is line 2.",
    "line3": "This is line 3."
  },
  "fr": {
    "heading": "Bienvenue !",
    "line1": "Ceci est la ligne 1.",
    "line2": "Ceci est la ligne 2.",
    "line3": "Ceci est la ligne 3."
  },
  "de": {
    "heading": "Willkommen!",
    "line1": "Dies ist Zeile 1.",
    "line2": "Dies ist Zeile 2.",
    "line3": "Dies ist Zeile 3."
  }
}

在这个修改后的版本中，我们添加了三个具有唯一ID的<p>元素（line1，line2，line3）来表示三个不同的文本行。JavaScript代码已经更新，可以从translate.json文件中获取翻译，并根据所选语言更新所有三行的内容。
您可以根据需要向HTML添加更多行或其他元素，并在JavaScript代码中包含它们各自的ID，以根据所选语言更新其内容。
请记住根据项目的文件结构调整JSON文件和JavaScript文件（script.js）的路径。
此更新的代码将允许您根据所选语言呈现和更新页面上的多行文本。
如果有帮助，请考虑接受这个答案。如果需要更多的帮助，请告诉我。

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何在网站中选择某个选项时更改网站上文本的语言

1条答案

相关问题

热门标签

最新问答