最近實現一個網頁新手引導的功能，網上找到這樣一個案例，分享給大家。
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .main { width: 100%; height: 100%; background-color: #f0f0f0; overflow: hidden; } ul { display: flex; flex-wrap: wrap; } li { list-style: none; width: 300px; height: 400px; text-align: center; background-color: #fff; font-size: 20px; position: relative; margin: 20px; } li>div:nth-child(1) { width: 300px; height: 400px; line-height: 400px; position: absolute; } li>div:nth-child(2) { width: 230px; height: 25px; line-height: 25px; position: absolute; right: 0; bottom: -33px; background-color: #fff; border-radius: 5px; cursor: pointer; left: 135px; display: none; } .center { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; display: none; } </style></head> <body> <div> <ul> <li> <div>這是列表一</div> <div> <span>測試第一個數據</span> <span>第一步</span> </div> </li> <li> <div>這是列表四</div> <div> <span>測試第四個數據</span> <span>第四步</span> </div> </li> <li> <div>這是列表二</div> <div> <span>測試第二個數據</span> <span>第二步</span> </div> </li> <li> <div>這是列表三</div> <div> <span>測試第三個數據</span> <span>第三步</span> </div> </li> </ul> <div> </div> </div> <script> let Mask = document.querySelector(".center") let domlist = document.querySelectorAll("li") console.log(Mask) // 默認第一項展示 showDom(0) // 設置元素的顯示 function showDom(index) { Mask.style.display = "block" domlist[index].children[1].style.display = "block" domlist[index].style.zIndex = 5 } // 設置元素的隱藏 function hideDom() { Mask.style.display = "none" for (let i = 0; i < domlist.length; i++) { domlist[i].children[1].style.display = "none" domlist[i].style.zIndex = 1 } } domClick() // 點擊事件 function domClick() { domlist[0].children[1].onclick = function () { console.log("141") hideDom() showDom(2) } domlist[1].children[1].onclick = function () { hideDom() } domlist[2].children[1].onclick = function () { hideDom() showDom(3) } domlist[3].children[1].onclick = function () { hideDom() showDom(1) } } </script></body> </html>
以上就是網頁新手指引的html實現demo的詳細內容，更多請關注木子天禾科技其它相關文章！
