自己手写了一个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>

更多相关文章

  1. $()的四种类型； jQuery方法；jQuery对象转js对象的方法----0413
  2. 【DG】DG日常维护
  3. vue之elementui，树形组件el-tree实现左右拖动滚动条
  4. 【等待事件】日志类 等待事件（4.1）--log file switch（日志文件切换）
  5. css的cursor样式
  6. Vue(5)： APP.vue引入CSS样式文件和动态切换组件的方法
  7. DAY03-实例演示选择器优先级、前端组件样式模块化实现、伪类选择
  8. 让 AirPods 在 iPhone 和其它苹果设备之间自动切换的方法
  9. 在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式？

随机推荐

  1. Android开发-一个简单的五子棋游戏
  2. 【Android】MVC模式在Android系统中的应
  3. Android优缺点
  4. Android的UI构造试图工具hierarchyviewer
  5. 【源码】Android 面包屑导航效果源码、An
  6. Android AsyncTas开发
  7. 美国Android占28%份额 摩托Droid最受欢迎
  8. Android 模拟器横屏竖屏切换设置
  9. Android ContentProvider 多进程multipro
  10. android EditText inputType