基于ID实现Div切换功能求助：点击链接仅显示对应语言Div

看起来你是在语言切换的逻辑里没做针对性判断，导致不管点哪个链接都会同时切换两个Div的显示状态。我来帮你修正这个问题，分两种方案给你参考：

方案一：直接控制display属性（适合简单场景） #

首先先修正你代码里的小拼写错误（frech应该是french），然后给函数加上明确的判断逻辑，根据传入的ID来指定显示/隐藏对应的Div：

function langToggle(id) {
  const english = document.getElementById("english");
  const french = document.getElementById("french");

  // 根据点击的链接ID判断要显示哪个语言
  if (id === "english") {
    english.style.display = "block";
    french.style.display = "none";
  } else if (id === "french") {
    english.style.display = "none";
    french.style.display = "block";
  }
}

对应的HTML要确保链接点击时传入正确的ID，并且初始状态英文显示、法文隐藏：

<!-- 语言切换链接 -->
<a href="javascript:void(0)" onclick="langToggle('english')">英文</a>
<a href="javascript:void(0)" onclick="langToggle('french')">法文</a>

<!-- 内容Div -->
<div id="english" style="display: block;">这里是英文内容...</div>
<div id="french" style="display: none;">这里是法文内容...</div>

方案二：用CSS类控制（更易于扩展） #

如果以后可能添加更多语言，用类来控制会更简洁，不用每次修改JS逻辑：

先写CSS样式：

/* 默认隐藏所有语言内容 */
.lang-content {
  display: none;
}
/* 激活状态显示内容 */
.lang-content.active {
  display: block;
}

然后修改JS函数：

function langToggle(id) {
  // 先移除所有语言Div的激活类
  document.querySelectorAll('.lang-content').forEach(item => {
    item.classList.remove('active');
  });
  // 给当前选中的语言Div添加激活类
  document.getElementById(id).classList.add('active');
}

对应的HTML结构：

<a href="javascript:void(0)" onclick="langToggle('english')">英文</a>
<a href="javascript:void(0)" onclick="langToggle('french')">法文</a>

<div id="english" class="lang-content active">英文内容...</div>
<div id="french" class="lang-content">法文内容...</div>

核心问题就是你原来的函数没有根据传入的id做针对性判断，而是可能用了无差别切换（比如反转当前display状态），导致不管点哪个链接都会同时触发两个Div的状态变化。现在的逻辑是明确指定：点英文就显示英文藏法文，点法文就藏英文显示法文，完全符合你的需求。

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