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>
