使用变量打开选项卡式部分的选项卡的Javascript打开页面

<ul class="tabs">
  <li data-tab="tab1">选项卡1</li>
  <li data-tab="tab2">选项卡2</li>
  <li data-tab="tab3">选项卡3</li>
</ul>

<div class="tab-content" data-tab-content="tab1">
  <h3>选项卡1的内容</h3>
  <!-- 其他内容 -->
</div>

<div class="tab-content" data-tab-content="tab2">
  <h3>选项卡2的内容</h3>
  <!-- 其他内容 -->
</div>

<div class="tab-content" data-tab-content="tab3">
  <h3>选项卡3的内容</h3>
  <!-- 其他内容 -->
</div>

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tabs li');
  const tabContents = document.querySelectorAll('.tab-content');

  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      const tabId = this.getAttribute('data-tab');

      tabContents.forEach(function(content) {
        if (content.getAttribute('data-tab-content') === tabId) {
          content.classList.add('active');
        } else {
          content.classList.remove('active');
        }
      });
    });
  });
});

.tab-content {
  display: none;
}

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