原生JS 实现点击每步的步骤条
1.style部分
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } .box { height: 100%; display: flex; justify-content: center; align-items: center; } .center { width: 100%; height: 20vh; display: flex; justify-content: center; } .items { width: 9vw; height: 18vh; background-color: #333; border-radius: 50%; position: relative; margin-right: 3vw; } /* 步骤圆形的激活样式 */ .colorshow { background-color: #1e6adb; } .borederColor{ border-color: transparent transparent transparent #1e6adb !important; } .triangle { border-style: solid; border-width: 1vw 1vw 1vw 1vw; border-color: transparent transparent transparent #333; position: absolute; right: -3vw; top: 7vh; } /* 让最后一个盒子没有border 这是元素的三角箭头*/ .items:last-child .triangle { border: none; } </style>
2.body部分
<body> <div class="box"> <div class="center" id="item"> <!-- 这里是循环动态渲染出来的 --> </div> </div> </body>
3.JS部分
<script> window.onload = function () { let item = document.getElementById('item') //取到外层父盒子的dom id为item的 let html = '' //声明一个html片段 // 循环这个html i,< 5 循环多少个 就是几 for (let i = 0; i <= 5; i++) { html += "<div class='items'><div class='triangle'></div></div>" //这个就是你要循环的元素 } //再把元素用innerHTML 塞到 元素为item的盒子里面 item.innerHTML = html //取到循环出来的 所有子元素 let items = document.querySelectorAll('.items') //取到循环出来的 横三角 let triangle = document.querySelectorAll('.triangle') //循环子元素 i为子元素数组的length for (let i = 0; i < items.length; i++) { //给子元素点击事件 items[i].addEventListener('click', function () { //每次点击时 循环子元素数组 把所有子元素的class清空 for (let i = 0; i < items.length; i++) { items[i].classList.remove('colorshow') //colorshow是class样式 } // //每次点击时 循环子元素数组 把所有子元素的borederColor的class清空 for (let i = 0; i < triangle.length; i++) { triangle[i].classList.remove('borederColor') } //上面清空子元素 class后 在往里面添加 新的class items[i].classList.add('colorshow') //圆形的class triangle[i].classList.add('borederColor')//横三角的class console.log(triangle[i]) }) } } </script>
效果图 样式可以自己修改
