js的tab选项卡

HTML部分

<ul>
        <li>歪头kitty</li>
        <li>门上Kitty</li>
        <li>摆烂Kitty</li>
        <li>音乐kitty</li>
    </ul>
    <div>
        <img src="./img/1.png" alt="" style="display: block;">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
        <img src="./img/4.png" alt="">
    </div>

 CSS部分

* {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            overflow: hidden;
        }
        
        li {
            width: 100px;
            height: 40px;
            background-color: #eee;
            border: 1px solid #ccc;
            float: left;
            line-height: 40px;
            text-align: center;
        }
        
        div {
            width: 406px;
            height: 100%;
            border: 1px solid #ccc;
        }
        
        img {
            width: 100%;
            display: none;
        }

 JS部分

//逻辑思路
        // 1.移动到哪个选项卡上 自己的背景颜色要改变
        // 2.对应的内容区域要显示 同理 移出时背景颜色恢复 对应的内容区继续隐藏

        // 获取数组
        let li = document.getElementsByTagName('li');
        let img = document.getElementsByTagName('img');

        for (let i = 0; i < li.length; i++) {
            // 先进行元素数组 下标设置
            li[i].index = i;


            li[i].onmouseover = function() {
                li[i].style.backgroundColor = "skyblue";
                // console.log(this.index);
                // 先把所有的图片都隐藏 再让对应的图片出现
                for (let j = 0; j < img.length; j++) {
                    img[j].style.display = 'none';
                }
                img[this.index].style.display = 'block';
            }

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