如何拆分单文件HTML/JS标签页代码，按标签页分离内容？

我目前正在使用这段HTML/JS标签页代码，但所有代码都集中在一个文件中，导致代码过于杂乱。是否可以将各个标签页（如London、Paris、Tokyo对应的标签页）的代码分别拆分到不同文件中？当前代码如下：

<!-- Tab links -->
<div 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>

<!-- Tab content -->
<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>

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

1. 把每个标签页的内容拆成独立的HTML片段 #

给每个城市的标签页内容单独创建一个HTML文件，这样后续修改某个城市的内容时，不用动主文件：

• london-tab.html

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

• paris-tab.html

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

• tokyo-tab.html

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

2. 把JS逻辑提取到单独的文件 #

创建一个tab-handler.js文件，把原来的切换逻辑和新增的内容加载逻辑放进去，这样主HTML里就不会有一堆JS代码了：

// 异步加载标签页内容的函数，避免一次性加载所有内容
async function loadTabContent(cityName) {
  const tabContainer = document.getElementById('tab-content-container');
  // 先检查该标签页是否已经加载过，避免重复请求
  if (!document.getElementById(cityName)) {
    const response = await fetch(`${cityName.toLowerCase()}-tab.html`);
    const html = await response.text();
    tabContainer.insertAdjacentHTML('beforeend', html);
  }
}

// 修改原有的切换函数，先确保内容加载完成再切换
function openCity(evt, cityName) {
  loadTabContent(cityName).then(() => {
    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";
  });
}

// 页面加载完成后自动激活第一个标签页
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.tablinks').click();
});

3. 重构主HTML文件 #

主文件只保留标签栏、内容容器，然后引入外部的JS（如果需要，CSS也可以拆出去）：

<!DOCTYPE html>
<html>
<head>
  <!-- 这里可以把CSS也拆到tab-styles.css里，用link引入，更整洁 -->
  <style>
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
  </style>
</head>
<body>

<!-- Tab links -->
<div 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="tab-content-container"></div>

<!-- 引入外部的JS文件 -->
<script src="tab-handler.js"></script>

</body>
</html>

额外小建议 #

• 如果你的项目是部署在服务器上的，也可以用服务器端的include语法（比如PHP的include()）来加载标签页内容，这样不需要前端异步请求；但上面的方案是纯前端实现，本地打开建议用Live Server这类工具，避免浏览器跨域限制。
• 把CSS也拆分到tab-styles.css文件，主HTML里用<link rel="stylesheet" href="tab-styles.css">引入，这样HTML、CSS、JS彻底分离，结构更清晰。

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