尝试创建带有标签的scrollView

<div class="scrollview">
  <div class="tags">
    <button class="tag active">标签1</button>
    <button class="tag">标签2</button>
    <button class="tag">标签3</button>
    <button class="tag">标签4</button>
  </div>
  <div class="content">
    <!-- 标签1对应的内容 -->
    <div class="item">标签1内容...</div>
    <!-- 标签2对应的内容 -->
    <div class="item">标签2内容...</div>
    <!-- 标签3对应的内容 -->
    <div class="item">标签3内容...</div>
    <!-- 标签4对应的内容 -->
    <div class="item">标签4内容...</div>
  </div>
</div>

.scrollview {
  overflow: auto;
  height: 300px;
}

.tags {
  display: flex;
  justify-content: flex-start;
}

.tag {
  padding: 8px 12px;
  margin-right: 10px;
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tag.active {
  background-color: #ccc;
}

.content {
  padding: 20px;
}

.item {
  display: none;
}

.item.active {
  display: block;
}

const tags = document.querySelectorAll('.tag');
const items = document.querySelectorAll('.item');

tags.forEach((tag, index) => {
  tag.addEventListener('click', () => {
    // 移除所有标签的active类名
    tags.forEach((tag) => tag.classList.remove('active'));
    // 添加点击标签的active类名
    tag.classList.add('active');

    // 显示对应的内容项
    items.forEach((item) => item.classList.remove('active'));
    items[index].classList.add('active');
  });
});