js两种方式实现tab切换、冒泡原理、事件委托

两种方式实现tab栏切换，简单容易了解

第一种方式：利用循环遍历数组

1、获取所有li标签对象和对应的div标签

2、循环遍历li标签的对象数组

3、给每个li标签绑定点击事件

4、利用排他思想移除li标签的active属性，给当前被点击的li标签添加active属性

5、利用排他思想让其他盒子隐藏，在让li对应的盒子显示

        const lis = document.querySelectorAll('.tab_nav li')
        const boxs = document.querySelectorAll('.tab_con div')
        for(let i = 0; i < lis.length; i++){
            lis[i].addEventListener('click', function(){
                document.querySelector('.tab_nav .active').classList.remove('active')
                const id = this.dataset.id
                this.classList.add('active')
                
                document.querySelector('.tab_con .active').classList.remove('active')
                boxs[id-1].classList.add('active')
            })
        }

 第二种方式：利用冒泡

1、获取ul对象，获取所有需要显示的盒子

2、给ul绑定click时间，（这里利用冒泡的原理进行事件委托）

3、判断如果点击的是ul的子元素li标签，进行下面的操作

4、利用排他思想移除li标签的active属性，给当前被点击的li标签添加active属性

5、利用排他思想让其他盒子隐藏，在让li对应的盒子显示

        const ul = document.querySelector('ul')
        const boxs = document.querySelectorAll('.tab_con div')

        ul.addEventListener('click', function(e){
            if(e.target.tagName === 'LI'){
                document.querySelector('.tab_nav .active').classList.remove('active')
                e.target.classList.add('active')
                const id = e.target.dataset.id
                
                document.querySelector('.tab_con .active').classList.remove('active')
                boxs[id-1].classList.add('active')
            }
        })

下面是我的html和css代码，简单的写了写

html:

<div class="container">
        <div class="tab_nav">
            <ul>
                <li data-id="1" class="active">web</li>
                <li data-id="2">java</li>
                <li data-id="3">c/c++</li>
                <li data-id="4">nodejs</li>
            </ul>
        </div>
        <div class="tab_con">
            <div data-id="1" class="active">1</div>
            <div data-id="2">2</div>
            <div data-id="3">3</div>
            <div data-id="4">4</div>
        </div>
    </div>

css:

.container{
            width: 500px;
            height: 300px;
            margin: 200px auto;
            background-color: #ccc;
       }
       .tab_nav{
            width: 100%;
            height: 30px;
       }
       .tab_nav ul{
            height: 30px;
            padding: 0;
            border-bottom: 1px solid #acacac;
       }
       .tab_nav ul li{
            list-style: none;
            float: left;
            width: 80px;
            text-align: center;
            line-height: 30px;
            margin: 0;
            border-left: 1px solid #acacac;
       }
       .tab_nav ul li:first-child{
            border:0px solid red;
       }
       .tab_nav .active{
            background-color: orange;
       }
       .tab_con{
            width: 100%;
            height: 270px;
            background-color: aquamarine;
       }
       .tab_con div{
            width: 100%;
            height: 100%;
            background-color: beige;
            display: none;
       }
       .tab_con .active{
            display: block;
       }