如何新增菜单标签页并使其与原有标签行为一致？

基于W3Schools的水平标签页示例，通过按钮调用JavaScript代码新增“Rome”标签页后，该标签页的行为与静态创建的“London”“Paris”“Tokyo”标签不一致，点击后对应内容始终处于display:none状态，无法正常显示。

核心问题：参数传递缺少引号 #

在newCityTab函数中，为新标签按钮绑定onclick事件时，拼接的参数未添加引号：

newTab.setAttribute("onclick", "openCity(event, " + cityName + ")");

这段代码生成的onclick内容是openCity(event, Rome)，其中Rome会被浏览器当作未定义的变量处理，而非字符串参数。当openCity函数执行时，document.getElementById(cityName)无法找到ID为undefined的元素，导致对应内容无法切换显示。

修复步骤 #

1. 给拼接的cityName参数添加单引号，确保传递的是字符串：

   newTab.setAttribute("onclick", "openCity(event, '" + cityName + "')");
   

2. 移除新按钮的display: block样式，避免破坏原标签的横向布局：
   删除newTab.setAttribute("style", "display: block;");这一行代码。

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;
}

/* Create an active new tablink class */
.tab button.new {
  background-color: #eaaa00;
  font-weight: bold;
}

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

HTML 与 JavaScript 部分 #

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div id="HorizonTab" 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>
<br>
<input type="button" value="Add new city" onclick="newCityTab(event, 'Rome')">

<script>
  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";
  }

  function newCityTab(evt, cityName) {
    var tab = document.getElementById("HorizonTab");
    var newTab = document.createElement("button");
    
    newTab.setAttribute("class", "tablinks");
    // 修复：添加引号包裹参数
    newTab.setAttribute("onclick", "openCity(event, '" + cityName + "')");
    // 移除破坏布局的display:block样式
    newTab.textContent = cityName;
    tab.appendChild(newTab);

    // Add new div to the body, content for new cityName
    var newDivCity = document.createElement("div");
    
    newDivCity.setAttribute("id", cityName);
    newDivCity.setAttribute("class", "tabcontent");
    
    var h3 = document.createElement("h3");
    
    h3.textContent = cityName;
    newDivCity.appendChild(h3);
    
    var p = document.createElement("p");
    
    p.textContent = cityName + " is another capital";
    newDivCity.appendChild(p);

    var lastCityDiv = document.getElementById('Tokyo');
    
    lastCityDiv.parentNode.insertBefore(newDivCity, lastCityDiv.nextSibling)
  }
</script>

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