如何在选项卡页上制作标签？

<div class="tab-container">
  <div class="tab" id="tab1">标签1</div>
  <div class="tab" id="tab2">标签2</div>
  <div class="tab" id="tab3">标签3</div>

  <div class="tab-content" id="content1">内容1</div>
  <div class="tab-content" id="content2">内容2</div>
  <div class="tab-content" id="content3">内容3</div>
</div>

.tab-container {
  display: flex;
}

.tab {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-content {
  display: none;
  padding: 10px;
}

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

// 获取选项卡和内容元素
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

// 为每个选项卡添加点击事件监听器
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有选项卡的active类
    tabs.forEach(tab => tab.classList.remove('active'));
    // 移除所有内容部分的active类
    contents.forEach(content => content.classList.remove('active'));

    // 添加当前选项卡的active类
    tab.classList.add('active');
    // 获取当前选项卡关联的内容ID
    const contentId = tab.getAttribute('id').replace('tab', 'content');
    // 添加对应内容部分的active类
    document.getElementById(contentId).classList.add('active');
  });
});