Blogger Information
Blog 8
fans 1
comment 0
visits 4887
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
tab切换
不露声色
Original
959 people have browsed it

自己手写了一个tab切换 样式没写,切换成功

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .tabcontent ul {display: none;}
  10. .ulitem.active{display: block;}
  11. </style>
  12. </head>
  13. <body>
  14. <div class="tabs">
  15. <ul class="list">
  16. <li class="item active" data-index="1">tab1</li>
  17. <li class="item" data-index="2">tab2</li>
  18. <li class="item" data-index="3">tab3</li>
  19. </ul>
  20. </div>
  21. <div class="tabcontent">
  22. <ul class="tabc1 ulitem active" data-index="1">
  23. <li>aaaa</li>
  24. <li>aaaa</li>
  25. <li>aaaa</li>
  26. </ul>
  27. <ul class="tabc2 ulitem" data-index="2">
  28. <li>bbbb</li>
  29. <li>bbbb</li>
  30. <li>bbbb</li>
  31. </ul>
  32. <ul class="tab3 ulitem" data-index="3">
  33. <li>cccc</li>
  34. <li>cccc</li>
  35. <li>cccc</li>
  36. </ul>
  37. </div>
  38. <script>
  39. //事件代理
  40. const tabul = document.querySelector(".list");
  41. const tabtul = document.querySelectorAll(".ulitem");
  42. tabul.addEventListener("click",(ev)=>{
  43. [...tabul.children].forEach((ev)=>{
  44. ev.classList.remove("active");
  45. })
  46. ev.target.classList.add("active");
  47. tabtul.forEach((evv)=>{
  48. if(ev.target.dataset.index === evv.dataset.index){
  49. evv.classList.add("active");
  50. }else{
  51. evv.classList.remove("active");
  52. return false;
  53. }
  54. })
  55. })
  56. </script>
  57. </body>
  58. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:其实这样的作业并不合格, 全是代码,没有图示, 没有说明, 如果你看到这样的博客, 愿意看下去吗?能得什么呢?作业不是只有我一个人看,下次注意
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post