js事件委托选项卡

<style>
        .active{background-color: #f00;}
        .tab div{display: none;}
        .show{display: block !important;}
    </style>

    <script>
        // 页面加载完成之后再执行
        window.onload = function(){
            var tab = document.querySelector('.tab');
            var btns = tab.querySelectorAll('button');
            var divs = tab.querySelectorAll('div');
            // 用事件监听的方式来绑定事件
            // 事件委托：要点击子元素时，把事件委托给父元素  实际上需要点击的是按钮，但是按钮很多，如果写在父元素，就 只需要绑定一个事件，可以提高执行效率
            tab.addEventListener('click',function(e){
                e = e || window.event;
                var tar = e.target || e.srcElement;
                // 给父元素绑定事件之后，所有的东西都会被点击，但是我只想要按钮可以点击，所以判断一下，
                if(tar.tagName === 'BUTTON'){
                    console.log(tar.innerHTML);
                    // 遍历所有的按钮，清除样式
                    btns.forEach(function(val,i){
                        val.className = '';
                        divs[i].className = '';
                        val.setAttribute('myindex',i)
                    })
                    // 给对应点击的按钮添加样式
                    tar.className = 'active';
                    // 对应的div需要显示  找不到角标 --- 给按钮设置自定义属性 30行代码
                    var v = tar.getAttribute('myindex');
                    divs[v].className = 'show'
                }
            })
        }
    </script>