个性简约风格的步骤条组件代码示例 - HTML, CSS, JavaScript实现

"以下是一个基于个性简约风格的步骤条组件的代码示例：\n\nHTML:\nhtml\n<div class=\"step-container\">\n <div class=\"step active\">\n <span class=\"step-number\">1</span>\n <span class=\"step-label\">Step 1</span>\n </div>\n <div class=\"step\">\n <span class=\"step-number\">2</span>\n <span class=\"step-label\">Step 2</span>\n </div>\n <div class=\"step\">\n <span class=\"step-number\">3</span>\n <span class=\"step-label\">Step 3</span>\n </div>\n</div>\n\n\nCSS:\ncss\n.step-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.step {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.step.active .step-number {\n background-color: #3498db;\n color: #fff;\n}\n\n.step.active .step-label {\n color: #3498db;\n}\n\n.step-number {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: #ddd;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n}\n\n.step-label {\n font-size: 14px;\n margin-top: 5px;\n color: #777;\n}\n\n\nJavaScript:\njavascript\n// 获取所有的步骤条元素\nconst steps = document.querySelectorAll('.step');\n\n// 为每个步骤条元素添加点击事件监听器\nsteps.forEach((step, index) => {\n step.addEventListener('click', () => {\n // 移除所有步骤条的 active 类名\n steps.forEach((step) => {\n step.classList.remove('active');\n });\n \n // 将当前步骤及之前的步骤添加 active 类名\n for(let i = 0; i <= index; i++) {\n steps[i].classList.add('active');\n }\n });\n});\n\n\n这个步骤条组件采用了简约风格的设计，步骤条由一系列的步骤组成，每个步骤都有一个编号和标签。点击步骤条可以切换当前步骤及之前的步骤的状态，当前步骤和之前的步骤会显示为激活状态，后续步骤则为非激活状态。你可以根据需求自定义步骤条的样式，包括颜色、大小等。\n