原生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>

效果图  样式可以自己修改

 

posted @ 2022-03-30 14:14  热爱前端的5号机器  阅读(924)  评论(0)  编辑  收藏  举报