如何创建好看的步骤条组件：代码示例和解释

以下是一个简单的步骤条组件的代码示例：\n\nHTML:\n\n<div id="step-container">\n <div class="step">Step 1</div>\n <div class="step">Step 2</div>\n <div class="step">Step 3</div>\n <div class="step">Step 4</div>\n</div>\n\n\nCSS:\n\n#step-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 400px;\n margin: 20px auto;\n}\n\n.step {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: #ccc;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: Arial, sans-serif;\n font-size: 14px;\n}\n\n.step.active {\n background-color: #ff6600;\n color: #fff;\n}\n\n\nJavaScript:\n\nconst steps = document.querySelectorAll('.step');\n\n步骤.forEach(步骤 => {\n 步骤.addEventListener('click', () => {\n 步骤.forEach(步骤 => 步骤.classList.remove('active'));\n 步骤.classList.add('active');\n });\n});\n\n\n这个组件使用了一个容器和一组步骤元素来创建步骤条。每个步骤元素都有一个点击事件监听器，当点击某个步骤时，它会添加一个active类来突出显示当前步骤，并移除其他步骤的active类。CSS样式定义了步骤元素的样式，包括圆形形状、背景颜色和文字样式。