如何使用CSS网格区域显示选项卡内容

<ul class="tab-list">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

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

.tab-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列网格 */
}

.tab {
  grid-column: span 1; /* 每个选项卡标题占据1列 */
}

.tab-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列网格 */
}

.tab-pane {
  grid-column: span 3; /* 每个选项卡内容占据3列 */
}

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

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    tabContents.forEach(content => {
      content.style.display = 'none';
    });

    // 显示点击的选项卡内容
    tabContents[index].style.display = 'block';
  });
});