如何在同一网页中使用多个互不干扰的独立代码编辑器

问题根源 #

• 你的JS代码中使用了全局范围的querySelectorAll，点击按钮时会选中页面所有编辑器的标签和内容区域，导致所有编辑器同时触发状态变更
• 多个编辑器复用了相同的id属性（HTML/CSS/JavaScript），HTML规范要求id全局唯一，document.getElementById只会匹配页面中第一个出现的对应id元素，所以永远只会修改第一个编辑器的内容展示

解决方案 #

修改JS逻辑改为仅操作当前点击按钮所属的编辑器容器，同时将id匹配改为自定义属性匹配，避免id冲突：

1. 修改JS代码 #

function openLanguage(evt, codeLanguage) {
  // 找到当前按钮所属的编辑器根容器
  const currentEditor = evt.currentTarget.closest('.codeOutput');
  if (!currentEditor) return;

  // 仅选中当前编辑器内的元素
  const tabcontent = currentEditor.querySelectorAll(".tabs .tabcontent");
  const tablinks = currentEditor.querySelectorAll(".tab .tablinks");
  const currentTab = currentEditor.querySelector('.tablinks.active');

  // 重置当前编辑器内的所有标签状态
  tabcontent.forEach(content => content.style.display = "none");
  tablinks.forEach(tab => tab.classList.remove("active"));

  if (currentTab != evt.currentTarget) {
    // 用自定义属性匹配对应语言的内容区，不用id
    currentEditor.querySelector(`.tabcontent[data-lang="${codeLanguage}"]`).style.display = "block";
    evt.currentTarget.classList.add("active");
  }
}

2. 修改HTML代码 #

给每个编辑器的tabcontent加上data-lang属性，删除重复的id即可，示例如下：

<!-- 第一个编辑器 -->
<div class="codeOutput">
  <div class="tab">
    <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button>
    <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button>
    <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button>
  </div>

  <div class="tabs">
    <div class="tabcontent" data-lang="HTML">
      <p>第一个编辑器的HTML代码</p>
    </div>

    <div class="tabcontent" data-lang="CSS">
      <p>第一个编辑器的CSS代码</p> 
    </div>

    <div class="tabcontent" data-lang="JavaScript">
      <p>第一个编辑器的JS代码</p>
    </div>

    <div class="result">
      Result
    </div>
  </div>
</div>

<!-- 第二个编辑器 结构完全一致，无需区分特殊标识 -->
<div class="codeOutput">
  <div class="tab">
    <button class="tablinks" onclick="openLanguage(event, 'HTML')">HTML</button>
    <button class="tablinks" onclick="openLanguage(event, 'CSS')">CSS</button>
    <button class="tablinks" onclick="openLanguage(event, 'JavaScript')">JavaScript</button>
  </div>

  <div class="tabs">
    <div class="tabcontent" data-lang="HTML">
      <p>第二个编辑器的HTML代码</p>
    </div>

    <div class="tabcontent" data-lang="CSS">
      <p>第二个编辑器的CSS代码</p> 
    </div>

    <div class="tabcontent" data-lang="JavaScript">
      <p>第二个编辑器的JS代码</p>
    </div>

    <div class="result">
      Result
    </div>
  </div>
</div>

3. CSS无需修改 #

原CSS全部为类选择器，不会出现冲突，可以直接沿用。

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