收藏
天蓬老师批改状态：合格
老师批语：其实这样的作业并不合格， 全是代码，没有图示， 没有说明， 如果你看到这样的博客， 愿意看下去吗？能得什么呢？作业不是只有我一个人看，下次注意
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
