如何在JS上制作高级选项卡

<div class="tabs">
  <ul class="tab-titles">
    <li class="active" data-tab="tab1">选项卡1</li>
    <li data-tab="tab2">选项卡2</li>
    <li data-tab="tab3">选项卡3</li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-item active">选项卡1的内容</div>
    <div id="tab2" class="tab-item">选项卡2的内容</div>
    <div id="tab3" class="tab-item">选项卡3的内容</div>
  </div>
</div>

.tabs {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.tab-titles {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-titles li {
  cursor: pointer;
  padding: 10px;
  background: #f0f0f0;
  flex: 1;
  text-align: center;
}

.tab-titles li.active {
  background: #ccc;
}

.tab-item {
  display: none;
  padding: 20px;
}

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

// 获取选项卡标题和内容的元素
const tabTitles = document.querySelectorAll('.tab-titles li');
const tabItems = document.querySelectorAll('.tab-item');

// 添加选项卡切换事件
tabTitles.forEach((title) => {
  title.addEventListener('click', () => {
    const tabId = title.getAttribute('data-tab');
    
    // 移除所有选项卡标题的激活状态
    tabTitles.forEach((title) => {
      title.classList.remove('active');
    });
    
    // 移除所有选项卡内容的激活状态
    tabItems.forEach((item) => {
      item.classList.remove('active');
    });
    
    // 添加当前选项卡标题的激活状态
    title.classList.add('active');
    
    // 显示当前选项卡内容
    document.getElementById(tabId).classList.add('active');
  });
});