步骤条 锚链接

[1——2——3——4]

框架思路：

每个数字进度用大的ul包裹，里面是几个小的li，之间的进度条用伪元素::after或::before表示

具体实现思路：

html：

结构类似如图【里面需要加文字部分的可以直接在li里加div或input】

<ul class="reg-1">
    <li class="lan">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

css：

• 给每个元素对应的基础css样式，包含 边框、背景、color、字号等，按照想要做的样子做好；
• 给每个独立的li加伪元素，前后都可，看具体应用。这里呈现的是每两个数字间的锚链接；
• 由上一步，总会在最前面或最后面多一个元素，对应给他加隐藏即可；
• 独立一个新的样式"lan" 给点击后的样式呈现（后面谁被点击，谁就实现这个样式）；
• 为了好看可以给每个锚链接的样式加上过渡。

js：

主要思路：点击触发按钮，步骤条和锚链接会亮起被点击的新样式，给用户的直觉是流程进度条。

• 给触发会引起步骤条变化的按钮添加点击事件；
• 用传统的onclick或者监听addEventListener方法都可，获取元素，绑定事件；
• 最简单：点击按钮，获取的第二个步骤条和其对应的锚链接.classList.add("lan")对应新增样式
• 对于有其他交互的，放在if函数里也可实现。

若每个数字下面对应一个页面，随着步骤条的变化页面也随之变化的话

• 就给每个页面单独放，display隐藏显示，并在每次display时写上对应的步骤条和锚链接的新增样式即可。