JavaScript案例——04tab选项卡功能

1.1 实现效果

2.1 移动到某个选项卡上，自己的背景颜色要改变，对应的内容区域要显示

2.1.1 由于要移动到选项卡，背景也要变化，所以要先取到li标签和img标签

//li和img都是一个数组
let li = document.getElementsByTagName("li");
let img = document.getElementsByTagName("img");

2.1.2 由于不知道选中的是哪个li，所以用数组循环

for (let i = 0 ; i<li.length ; i++){
    li[i].onmouseover = function(){
        li[i].style.backgroundColor = '#aaa';
    }
}

2.1.3 同理，移除时，背景的颜色要恢复，对应内容区域要隐藏

for (let i = 0 ; i<li.length ; i++){
    li[i].onmouseover = function(){
        li[i].style.backgroundColor = '#aaa';
    }

    li[i].onmouseout = function(){
        li[i].style.backgroundColor = '#eee';
    }
}

3.1 实现图片和列表的一一对应

3.1.1 首先要让图片和列表的下标都一致

//先让li数组的下标等于i，然后让img的数组下标也等于i，然后让img的下标为li[i].index，变成这样的连接结构:
li[i].index = i;

img[this.index].style.display = 'block';

4.1 由于没有设置隐藏，经过图片时会全部显示出来，所以要进行修改

4.1.1 先让所有的img数组的图片都隐藏，使用for循环，然后让鼠标经过的图片显示即可

//先把所有的图片隐藏，再让对应的图片显示
for(let j = 0;j<img.length;j++){
    img[j].style.display = 'none';
}
img[this.index].style.display = 'block';

4.1.2 或者在鼠标移出的函数那里加上上述这个for循环的代码即可

资料来源：20个JavaScript经典案例_哔哩哔哩_bilibili