如何用精简方法实现多页面HTML文本双语切换？

核心思路 #

放弃用id定位单个元素，改用class批量标记同语言内容块，通过JS批量切换所有对应class元素的显示状态，同时用localStorage持久化当前语言选择，实现全站（包括刷新、页面跳转后）的语言一致性。

实现代码 #

HTML结构

给所有对应语言的内容块添加统一的class标记，比如lang-en对应英文，lang-sv对应瑞典语：

<button onclick="toggleLang()">切换语言</button>

<!-- 页面区块1 -->
<div class="content-block">
  <div class="lang-en">
    <h1>Welcome</h1>
    <p>English text for section 1</p>
  </div>
  <div class="lang-sv hidden">
    <h1>Vällkommen</h1>
    <p>Svensk tekst för sektion 1</p>
  </div>
</div>

<!-- 页面区块2 -->
<div class="content-block">
  <div class="lang-en">
    <h1>About Us</h1>
    <p>Our story in English</p>
  </div>
  <div class="lang-sv hidden">
    <h1>Om Oss</h1>
    <p>Vårt historia på svenska</p>
  </div>
</div>

CSS样式

保留基础的隐藏类：

.hidden {
  display: none;
}

JavaScript逻辑

批量操作同语言元素，切换显示状态并持久化语言选择：

// 页面加载时初始化语言（读取本地存储，无则默认英文）
window.onload = () => {
  const savedLang = localStorage.getItem('currentLang') || 'en';
  const hideLang = savedLang === 'en' ? 'sv' : 'en';
  document.querySelectorAll(`.lang-${hideLang}`).forEach(el => el.classList.add('hidden'));
};

// 切换语言核心函数
const toggleLang = () => {
  // 判断当前激活的语言
  const isEnglishActive = !document.querySelector('.lang-en').classList.contains('hidden');
  const [showLang, hideLang] = isEnglishActive ? ['sv', 'en'] : ['en', 'sv'];

  // 批量切换所有对应语言元素的显示状态
  document.querySelectorAll(`.lang-${hideLang}`).forEach(el => el.classList.add('hidden'));
  document.querySelectorAll(`.lang-${showLang}`).forEach(el => el.classList.remove('hidden'));

  // 保存当前语言到本地存储
  localStorage.setItem('currentLang', showLang);
};

精简优化点 #

• 用document.querySelectorAll()实现全站同语言元素的批量操作，解决单个元素切换的局限
• 依赖localStorage实现语言状态持久化，刷新或跳转页面后自动保持当前选择
• 逻辑极简：通过判断首个语言元素的状态确定切换方向，避免冗余条件
• 纯原生JS实现，无额外依赖，体积最小化

内容的提问来源于stack exchange，提问作者art vanderlay