用于帮助合并跨多个选项卡使用的最后一列的代码

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

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

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

.tab:hover {
  background-color: #aaa;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 10px;
}

.content {
  display: none;
}

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

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    const tabId = tab.getAttribute('id');
    
    contents.forEach((content) => {
      content.style.display = 'none';
    });
    
    document.getElementById(tabId).style.display = 'block';
  });
});