我可以在选项卡页中使用ClassId来区分它们的内容吗

<div class="tab">
  <div id="tab1" class="tab-content">选项卡页1的内容</div>
  <div id="tab2" class="tab-content">选项卡页2的内容</div>
  <div id="tab3" class="tab-content">选项卡页3的内容</div>
</div>

.tab-content {
  display: none; /* 隐藏所有选项卡页的内容 */
}

.tab-content.active {
  display: block; /* 显示当前选中的选项卡页的内容 */
}

// 为选项卡添加点击事件监听器
var tabs = document.getElementsByClassName('tab-content');
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
    }
    // 为当前选中的选项卡添加active类
    this.classList.add('active');
  });
}