2/50
这个小项目主要是实现一个进度栏的功能,常见于我们网申填写简历表单的时候,可能会有一些喜欢扒户口的公司,可能会让你填一大堆信息,还分阶段,本次秋招就填过不少,(个人感觉这种公司其实挺让人无语哈哈哈)先看大概实现的效果:
一开始的时候:
默认在1阶段,然后prev(前一个)是默认没办法点的
中间阶段:prev和next都是可以点击的
最后阶段:next就被禁用了,无法点击了
html部分直接上代码吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<!-- 这是数字之间的过渡线 -->
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">