js横向时光轴

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-content">事件 1</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">事件 2</div>
  </div>
  <!-- 更多事件 -->
</div>

.timeline {
  display: flex;
  overflow-x: auto;
}

.timeline-item {
  min-width: 200px;
  margin-right: 20px;
}

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

const timelineItems = document.querySelectorAll('.timeline-item');

timelineItems.forEach(item => {
  item.addEventListener('click', () => {
    alert(`您点击了${item.querySelector('.timeline-content').innerText}`);
  });
});