写一个好看的步骤条组件代码

以下是一个简单的步骤条组件的代码示例：

HTML:

<div id="step-container">
  <div class="step">Step 1</div>
  <div class="step">Step 2</div>
  <div class="step">Step 3</div>
  <div class="step">Step 4</div>
</div>

CSS:

#step-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  margin: 20px auto;
}

.step {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.step.active {
  background-color: #ff6600;
  color: #fff;
}

JavaScript:

const steps = document.querySelectorAll('.step');

steps.forEach(step => {
  step.addEventListener('click', () => {
    steps.forEach(step => step.classList.remove('active'));
    step.classList.add('active');
  });
});

这个组件使用了一个容器和一组步骤元素来创建步骤条。每个步骤元素都有一个点击事件监听器，当点击某个步骤时，它会添加一个active类来突出显示当前步骤，并移除其他步骤的active类。CSS样式定义了步骤元素的样式，包括圆形形状、背景颜色和文字样式