进阶任务十

1.代码

<script>
        var tabHeader = document.querySelector('.tab-header');
        var tabLis = document.querySelectorAll('.tab-header>li');
        var tabPanels = document.querySelectorAll('.tab-container>li');

        tabLis.forEach(function(tab){
            tab.addEventListener('click', function(){
                tabLis.forEach(function(node){
                    node.classList.remove('active')
                })

                this.classList.add('active')
                var index = [].indexOf.call(tabLis,this)

                tabPanels.forEach(function(node){
                    node.classList.remove('active')
                })
                tabPanels[index].classList.add('active')
            })
        })
        
        tabHeader.addEventListener('click',function(e){
            var clickNode = e.target;
            if(clickNode.tagName.toLowerCase() === 'li'){
                for(i = 0; i < tabLis.length; i++){
                    tabLis[i].classList.remove('active');
                }
                clickNode.classList.add('active');

                var index = [].indexOf.call(tabLis,clickNode);

                for(var i = 0; i < tabPanels.length; i++){
                    tabPanels[i].classList.remove('active')
                }
                tabPanels[index].classList.add('active');
            }
        })
    </script>

2. 代码