如何在页面加载时仅显示1个选项卡

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

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

.tab-content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

.tab-content:first-child {
  display: block;
}

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 隐藏所有内容区域
    tabContents.forEach(content => {
      content.style.display = 'none';
    });
    
    // 显示当前选中的内容区域
    tabContents[index].style.display = 'block';
  });
});