js 滚动tab

<div class="tabs">
  <ul class="tab-titles">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <!-- 更多Tab -->
  </ul>
  <div class="tab-contents">
    <div class="active">Content of Tab 1</div>
    <div>Content of Tab 2</div>
    <div>Content of Tab 3</div>
    <!-- 更多内容 -->
  </div>
</div>

.tabs {
  width: 100%;
}
.tab-titles {
  display: flex;
  list-style: none;
}
.tab-titles li {
  padding: 10px;
  cursor: pointer;
}
.tab-titles li.active {
  background-color: #f0f0f0;
}
.tab-contents div {
  display: none;
  padding: 20px;
}
.tab-contents div.active {
  display: block;
}

document.querySelectorAll('.tab-titles li').forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 移除所有Tab的active类
    document.querySelectorAll('.tab-titles li').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-contents div').forEach(c => c.classList.remove('active'));

    // 添加当前点击的Tab和对应内容的active类
    tab.classList.add('active');
    document.querySelectorAll('.tab-contents div')[index].classList.add('active');

    // 如果需要滚动效果，可以在这里添加滚动逻辑
    // 例如，平滑滚动到当前激活的Tab内容区域
    const content = document.querySelectorAll('.tab-contents div')[index];
    content.scrollIntoView({ behavior: 'smooth' });
  });
});