自己手写了一个tab切换 样式没写，切换成功
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tabcontent ul {display: none;} .ulitem.active{display: block;} </style></head><body> <div class="tabs"> <ul class="list"> <li class="item active" data-index="1">tab1</li> <li class="item" data-index="2">tab2</li> <li class="item" data-index="3">tab3</li> </ul> </div> <div class="tabcontent"> <ul class="tabc1 ulitem active" data-index="1"> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> <ul class="tabc2 ulitem" data-index="2"> <li>bbbb</li> <li>bbbb</li> <li>bbbb</li> </ul> <ul class="tab3 ulitem" data-index="3"> <li>cccc</li> <li>cccc</li> <li>cccc</li> </ul> </div> <script> //事件代理 const tabul = document.querySelector(".list"); const tabtul = document.querySelectorAll(".ulitem"); tabul.addEventListener("click",(ev)=>{ [...tabul.children].forEach((ev)=>{ ev.classList.remove("active"); }) ev.target.classList.add("active"); tabtul.forEach((evv)=>{ if(ev.target.dataset.index === evv.dataset.index){ evv.classList.add("active"); }else{ evv.classList.remove("active"); return false; } }) }) </script></body></html>
