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>
效果圖 樣式可以自己修改
