动态可添加Tab页面问题：新增标签按钮正常但关联内容不显示

核心问题 #

新增Tab按钮成功显示，但关联内容无法正常展示，根源在于两个关键问题：

1. 事件对象未正确传递：自定义按钮的点击事件未将event对象传入openCity函数，导致函数执行到evt.currentTarget.className += " active"时触发错误，中断后续逻辑（包括内容显示的设置）。
2. ID重复冲突：给新按钮设置了与对应内容相同的ID，违反HTML中ID必须唯一的规则，可能引发DOM选择异常。

修复步骤 #

1. 修正事件传递逻辑 #

移除多余的btnClick函数，直接在按钮的点击事件中传递event对象给openCity，确保函数能正确获取当前触发元素：

btn.onclick = function(evt){
  openCity(evt, gatesetname);
};

2. 移除重复ID设置 #

删除btn.id = gatesetname;代码行，按钮无需ID标识，避免与内容ID冲突。

3. 优化内容插入位置（可选） #

将新内容插入到tabbar的同级位置（而非body末尾），保持DOM结构一致性：

div1.insertAdjacentElement('afterend', div);

4. 增加输入容错处理 #

添加用户取消输入的判断，避免空值导致的错误：

if (!gatesetname) return;

修正后的完整代码 #

HTML #

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<button onclick="promptUser(event)">Add tab</button>

<div id='tabbar' class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<template id='Template'>
<div id="Placeholder" class="tabcontent">
  <h3>Test</h3>
  <p>This is a test.</p>
</div>
</template>

CSS #

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript #

function promptUser(evt) {
  let gatesetname = prompt("Please enter gate set name");
  if (!gatesetname) return;

  const btn = document.createElement('button');
  const div1 = document.getElementById('tabbar');

  btn.innerText = gatesetname;
  btn.classList.add("tablinks");
  btn.onclick = function(evt){
    openCity(evt, gatesetname);
  };

  div1.appendChild(btn);
  
  let temp = document.getElementById('Template');
  var cloneTemplate = temp.content.cloneNode(true);
  var div = cloneTemplate.querySelector('div.tabcontent');
  div.id = gatesetname;
  
  div1.insertAdjacentElement('afterend', div);
  btn.click();
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

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