原生实现一个steps步骤组件

使用原生的 HTML、CSS 和 JavaScript 来实现一个简单的步骤条，那么可以按照以下步骤来进行：

HTML 结构

首先，定义一个基本的 HTML 结构来表示步骤条：

<div class="steps">
  <div class="step-item active">
    <span class="step-number">1</span>
    <span class="step-title">步骤 1</span>
  </div>
  <div class="step-item">
    <span class="step-number">2</span>
    <span class="step-title">步骤 2</span>
  </div>
  <div class="step-item">
    <span class="step-number">3</span>
    <span class="step-title">步骤 3</span>
  </div>
</div>

CSS 样式

使用 CSS 来定义步骤条的样式，包括步骤项的外观、激活状态以及步骤号码和标题的样式：

.steps {
  display: flex;
}

.step-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 10px 0;
}

.step-number {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin: 0 auto 5px;
  background-color: #fff;
}

.step-title {
  display: block;
}

.step-item.active .step-number {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

JavaScript 动态切换步骤

使用 JavaScript 来实现动态切换步骤的功能。你可以根据用户操作（例如点击按钮）来切换激活状态：

// 获取所有步骤项

const stepItems = document.querySelectorAll('.step-item');

// 给每个步骤项添加点击事件监听器
stepItems.forEach((step, index) => {
  step.addEventListener('click', () => {
    // 移除所有步骤项的 active 类
    stepItems.forEach(item => item.classList.remove('active'));
    // 添加当前点击的步骤项 active 类
    step.classList.add('active');
  });
});

实现效果

通过以上代码，你可以实现一个简单的步骤条，用户点击不同的步骤项时，它们会切换到激活状态。你可以根据需要进一步扩展样式和功能，例如添加过渡效果、描述信息等。

这种原生实现方式灵活性较高，适用于简单的步骤条需求，但如果你的项目较为复杂或需要更多交互功能，考虑使用流行的 UI 组件库（如 Bootstrap、Foundation 等）或者 Vue.js、React 等框架可能会更加方便和高效。