var tabNode = leftNode.getElementsByTagName('div');
var allRight = document.getElementsByClassName('rightNode');
var pic = picBody.getElementsByTagName('div');
var sum = 0;
console.log(allRight)
for(let i = 0;i<tabNode.length;i++){
tabNode[i].index = i;
tabNode[i].onclick = function(){
for(let j = 0;j<allRight.length;j++){
allRight[j].style.display = 'none';
tabNode[j].style.background = 'white';
this.style.background = 'green';
if(this.index == 2){
allRight[this.index].style.display = 'block';
}
else{
allRight[this.index].style.display = 'flex';
}
}
}
}
感觉像是哪里扒出来的菜单之类的代码，但是写的稀烂，不如直接用轮子
var tabNode = leftNode.getElementsByTagName('div');//从leftNode的子节点中选择所有div节点
var allRight = document.getElementsByClassName('rightNode');//选择所有具有类名“rightNode”的节点
var pic = picBody.getElementsByTagName('div');//选择所有在picBody下的div标签节点
var sum = 0;//定义计数器
console.log(allRight)//控制台输出
for(let i = 0;i<tabNode.length;i++){//遍历tabNode
tabNode[i].index = i;//为每一个元素赋予索引值
tabNode[i].onclick = function(){//定义点击事件监听器
for(let j = 0;j<allRight.length;j++){//遍历allRight
allRight[j].style.display = 'none';//将allRight的元素设置为不显示 => display： none
tabNode[j].style.background = 'white';//将其他tabNode的元素背景色设置为白色
this.style.background = 'green';//将自身的背景颜色设置为绿色
if(this.index == 2){//如果自身索引为2
allRight[this.index].style.display = 'block';//与自身同索引的allRight显示样式设置为block
}
else{
allRight[this.index].style.display = 'flex';//与自身同索引的allRight显示样式设置为flex
}
}
}
}