JavaScript を使用してタブ コンテンツの遅延読み込みを実装するにはどうすればよいですか?

<div class="tabs">
  <ul class="tab-nav">
    <li data-tab="tab1" class="active">选项卡1</li>
    <li data-tab="tab2">选项卡2</li>
    <li data-tab="tab3">选项卡3</li>
  </ul>
  
  <div class="tab-content">
    <div data-tab="tab1" class="tab-panel active">
      <!-- 选项卡1的内容 -->
    </div>
    <div data-tab="tab2" class="tab-panel">
      <!-- 选项卡2的内容 -->
    </div>
    <div data-tab="tab3" class="tab-panel">
      <!-- 选项卡3的内容 -->
    </div>
  </div>
</div>

.tabs {
  width: 100%;
}

.tab-nav {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tab-nav li {
  cursor: pointer;
  padding: 10px 20px;
  background-color: #f1f1f1;
}

.tab-nav li.active {
  background-color: #c1c1c1;
}

.tab-panel {
  display: none;
  padding: 20px;
}

.tab-panel.active {
  display: block;
}

(function() {
  var tabNav = document.querySelector('.tab-nav');
  var tabPanels = document.querySelectorAll('.tab-panel');

  tabNav.addEventListener('click', function(e) {
    var targetTab = e.target.getAttribute('data-tab');

    if (targetTab) {
      Array.from(tabNav.children).forEach(function(tab) {
        tab.classList.remove('active');
      });

      e.target.classList.add('active');

      Array.from(tabPanels).forEach(function(panel) {
        panel.classList.remove('active');
      });

      var targetPanel = document.querySelector('[data-tab="' + targetTab + '"]');
      targetPanel.classList.add('active');
    }
  });
})();