选项卡实现逻辑：
1、事件：onmouseover onmouseout
2、鼠标移入： 移动到哪个选项卡，哪个的背景颜色变成红色
鼠标移出： 移出哪个选项卡，哪个的背景变白色
3、鼠标点击选项卡
1） 设置点击的选项卡的索引
2） 鼠标移入时，先让所有的图片隐藏，再让对应的图片显示
3) 鼠标移出选项卡时，默认显示第一张图片
<style type="text/css"> ul, li, div { margin: 0; padding: 0; } ul { width: 220px; line-height: 40px; display: flex; border: 1px solid #ccc; border-bottom: 0; font-size: 18px; } ul li { list-style: none; flex: 1; text-align: center; border-right: 1px solid #ccc; } ul li:last-child { border-right: 0; } .box { position: relative; width: 220px; height: 220px; border: 1px solid #cecece; overflow: hidden; } img { position: absolute; left: 0; top: 0; display: none; } img:first-child { display: block; } </style> </head> <body> <ul> <li>体育</li> <li>财经</li> <li>新闻</li> </ul> <div class="box"> <img src="./img/1.jpg" alt=""> <img src="./img/2.jpg" alt=""> <img src="./img/3.jpg" alt=""> </div> <script type="text/javascript"> var aLi = document.getElementsByTagName("li"); var aImg = document.getElementsByTagName("img"); var oUl = document.querySelector("ul"); for (let i = 0; i < aLi.length; i++) { // 先设置对应的数组索引 aLi[i].index = i; aLi[i].onmouseover = function () { for (let j = 0; j < aImg.length; j++) { aImg[j].style.display = "none"; } this.style.backgroundColor = "pink"; aImg[this.index].style.display = "block"; } aLi[i].onmouseout = function () { this.style.backgroundColor = "white"; aImg[this.index].style.display = "none"; } } oUl.onmouseout = function () { aImg[1].style.display = "block"; } </script>