js原生实现步骤条

要使用原生JavaScript实现步骤条，你可以创建一个HTML结构，然后用JavaScript来处理步骤的显示和交互。以下是一个简单的实现示例：

HTML:

<div id="step-bar">
  <div class="step" data-step="1">步骤1</div>
  <div class="step" data-step="2">步骤2</div>
  <div class="step" data-step="3">步骤3</div>
  <div class="step" data-step="4">步骤4</div>
</div>

CSS:

#step-bar {
  display: flex;
}
 
.step {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
 
.step.active {
  color: #fff;
  background-color: #007bff;
}

JavaScript:

document.querySelectorAll('.step').forEach(function(step) {
  step.addEventListener('click', function() {
    // 移除所有步骤的active类
    document.querySelectorAll('.step').forEach(function(s) {
      s.classList.remove('active');
    });
    
    // 添加当前点击的步骤的active类
    this.classList.add('active');
    
    // 这里可以添加更多的逻辑，比如显示或隐藏内容区域等
  });
});

这个实现允许用户点击步骤条上的任何一个步骤，然后该步骤会被高亮显示，同时其他步骤保持不变。你可以根据需要添加更多的功能，比如显示对应步骤的内容等。