无法将选项卡式活动中的旧片段替换为新片段

<ul class="tab-nav">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane">选项卡1的内容</div>
  <div class="tab-pane">选项卡2的内容</div>
  <div class="tab-pane">选项卡3的内容</div>
</div>

// 获取选项卡导航栏和内容区域的DOM元素
var tabNav = document.querySelector('.tab-nav');
var tabContent = document.querySelector('.tab-content');

// 监听选项卡导航栏的点击事件
tabNav.addEventListener('click', function(event) {
  // 判断点击的是否为选项卡
  if (event.target.classList.contains('tab')) {
    // 获取点击的选项卡的索引
    var index = Array.from(tabNav.children).indexOf(event.target);
    
    // 获取对应的内容区域
    var tabPane = tabContent.querySelector('.tab-pane:nth-child(' + (index + 1) + ')');
    
    // 替换内容区域的内容为新的片段
    tabContent.innerHTML = tabPane.innerHTML;
  }
});