*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
margin: 100px;
}
.scrollList >li{
position: relative;
height: 60px;
line-height: 60px;
}
.scrollList >li::before {
content : '';
width: 12px;
height: 12px;
border: 1px solid orange;
border-radius: 50%;
color: #666;
position: absolute;
top: 50%;
transform: translateY(-50%);
left:-20px;
z-index: 999;
box-sizing: border-box;
}
.scrollList >li.active::before{
background-clip:content-box;
padding:2px;
background-color:orange;
}
.scrollList >li::after{
content: '';
height: 48px;
width: 2px;
position: absolute;
left: -15px;
top: 36px;
background: orange;
}
- 1
- 2
- 3
- 4
var oLi = document.querySelectorAll(".scrollList li");
for(var i = 0;i
oLi[i].onclick = function(){
this.classList.add("active");
}
}