Stepper 控件是一种常见的 Material Design 设计风格中的交互控件。通常用于引导用户在多个步骤中完成复杂操作，如登陆、注册、填写表单等。在本文中，我们将指导您如何使用 HTML、CSS 和 JavaScript 实现这个控件。
第一步：HTML 结构
首先我们需要构建一个 Stepper 控件的 HTML 结构。一般来说，Stepper 控件由若干个步骤构成，每个步骤包含一个标题和一个描述。还有一个激活线标记当前活动的步骤。
-- -------------------- ---- -------
---- ----------------
---- ----------- --------
---- ----------------------- -------
---- ---------------------- -- ---- -------- -----------------
------
---- -------------
---- ----------------------- -------
---- ------------------------ ---- ------- ------------
------
---- -------------
---- ----------------------- -------
---- ------------------------ ---- -----------
------
---- -------------------
------在上面的代码中，我们使用 div 元素来表示 Stepper 和每个步骤，使用 class 属性来标识它们的样式和状态。
第二步：CSS 样式
通过 CSS，我们可以定义 Stepper 和每个步骤的样式。我们使用 display: flex 属性使其成为一个水平排列的容器，并根据当前活动步骤来确定激活线的位置。
-- -------------------- ---- ------- -------- - -------- ----- - ----- - ------------- ----- - ----------- - ---------- ----- ------------ ---- -------------- ---- - ---------- - ---------- ----- ------ ----- - ------- ----------- - ------ -------- - ----- - ------- ---- ----------- ----- ----- -- ----------- ----- --------- --------- - ------------- - -------- --- ------ ----- ------- ----- ----------- -------- -------------- ---- --------- --------- ---- ----- ------ ----- -
在上面的代码中，我们为 .stepper 容器设置了 display: flex 属性使其为水平排列，并利用 .step 样式将步骤组件每列占位。我们还定义了激活的步骤类 .active 的样式，包括颜色、线条位置和激活线的状态。
第三步：JavaScript
通过 JavaScript，我们可以实现交互功能以及动态更新 Stepper 控件。我们需要添加一些事件监听器，以响应用户的操作。 这里我们使用 jQuery 库来简化代码编写。
-- -------------------- ---- -------
---------------------------- -
--- ----------- - --
--------------------------- -
---------------------------------
---------------------------
----------- - --------------- - --
----------------------- ------------ - -- - ------ - -----
---
---在上面的代码中，我们首先使用 var 关键字声明并初始化一个 currentStep 变量为 1，表示当前步骤的索引。
然后，我们为每个步骤元素安装一个 click 事件监听器，当用户点击一个步骤时，我们会执行一系列操作。我们首先将所有步骤元素的 active 类移除，然后将当前点击的元素添加 active 类。然后，我们使用 jQuery 的 index 方法取得当前点击的步骤的索引值，并更新 currentStep 变量。最后，我们更新激活线的宽度，初始状态下的激活线的宽度为零，通过通过计算宽度（每个步骤 33.333%）并设置该值即可更新激活线的位置。
示例代码
完整的示例代码可以在以下 gist 中找到：
https://gist.github.com/anonymous/0df14e144c960ba7125100f761a01c04
输入以下命令以在本地运行上面的 demo：
git clone https://gist.github.com/anonymous/0df14e144c960ba7125100f761a01c04 cd 0df14e144c960ba7125100f761a01c04 open index.html
总结
在本文中，我们深入学习了如何使用 HTML、CSS 和 JavaScript 实现一个 Material Design 风格的 Stepper 控件。希望这篇文章对您有所帮助，并激发您在接下来的前端学习中的灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f49d6add4f0e0ff7f5044