前端jstab栏切换（事件委托+排他思想+自定义属性）

2301_80142734

已于 2023-11-02 23:34:33 修改

阅读量423

点赞数

文章标签：前端

于 2023-10-31 23:46:03 首次发布

本文链接：https://blog.csdn.net/2301_80142734/article/details/134128028

版权

本文介绍了如何通过事件委托在JavaScript中处理ul和li元素的点击事件，同时关注了如何针对不同元素类型（如li和p）添加特定事件处理，以及如何使用自定义属性data-id和数组操作来管理tab栏的切换效果。

摘要由CSDN通过智能技术生成

1.利用冒泡，经过li，调用ul,即不给li添加事件，而是给ul添加事件，利用冒泡，经过子盒子，父盒子同样的点击事件将会被触发。（事件委托）

2.如果ul不只有li ,还有p，但是只要li改变样式，需要添加事件对象e

e.target.tagName==="Li"

3.自定义属性data-id="0" e.target.dataset.id

4.利用all获得数组

5.注意要给a为<a href="javascript:;" class="active" data-id="0">账户登录</a>

tab栏切换代码

<script>
    // 获取导航栏
    const tab_nav = document.querySelector('.tab-nav')
    // 获取切换内容的数组
    const pane = document.querySelectorAll('.tab-pane')
     
    // 事件监听(事件委托，对经过的父盒子进行事件监听，通过冒泡，经过子盒子都会触发父盒子的点击事件)
    tab_nav.addEventListener('click',function(e){
       
      // 通过e.target.tagName === 'A'来限定只有经过a才会触发
      if(e.target.tagName ==='A'){
        // 排他思想（移除类+添加类）
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        // 显示和隐藏步骤，先让所有子盒子都隐藏，再把对应序号的盒子显示
        // 由于前面通过all获得了切换内容的数组，所以通过for来遍历数组，实现所有盒子都隐藏
        for (let i = 0; i <pane.length;i++){
          pane[i].style.display = 'none'
        }
       
        pane[e.target.dataset.id].style.display = 'block'
      }
    })
  </script>