步骤条的html css js实现

82 阅读1分钟

步骤条 锚链接


[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时写上对应的步骤条和锚链接的新增样式即可。