<div id="language-toggle">
  <button onclick="setLanguage('zh')">中文</button>
  <button onclick="setLanguage('en')">English</button>
</div>

<h1 id="title"></h1>
<p id="description"></p>

<script>
const translations = {
  zh: {
    title: "欢迎使用多语言网站",
    description: "这是一个简单的中英文切换示例。"
  },
  en: {
    title: "Welcome to Multilingual Site",
    description: "This is a simple example of language switching."
  }
};

function setLanguage(lang) {
  document.getElementById("title").textContent = translations[lang].title;
  document.getElementById("description").textContent = translations[lang].description;
  // 可选：将用户选择的语言存入本地存储
  localStorage.setItem("language", lang);
}

// 页面加载时恢复上次选择的语言
window.onload = function() {
  const s*edLang = localStorage.getItem("language") || "zh";
  setLanguage(s*edLang);
};
</script>

<p data-lang-key="greeting">你好，世界！</p>

<script>
const langData = {
  zh: { greeting: "你好，世界！" },
  en: { greeting: "Hello, World!" }
};

function setLanguage(lang) {
  document.querySelectorAll("[data-lang-key]").forEach(element => {
    const key = element.getAttribute("data-lang-key");
    element.textContent = langData[lang][key];
  });
  localStorage.setItem("language", lang);
}
</script>

<script src="https://unpkg.com/i18next/i18next.min.js"></script>
<h1 data-i18n="title"></h1>

<script>
i18next.init({
  lng: localStorage.getItem("language") || "zh",
  resources: {
    zh: {
      translation: { title: "多语言标题" }
    },
    en: {
      translation: { title: "Multilingual Title" }
    }
  }
}, function(err, t) {
  document.querySelectorAll("[data-i18n]").forEach(el => {
    el.textContent = t(el.getAttribute("data-i18n"));
  });
});

function changeLanguage(lang) {
  i18next.changeLanguage(lang);
  localStorage.setItem("language", lang);
  location.reload(); // 简单刷新更新文本
}
</script>