js 实现tab选项卡

选项卡实现逻辑：

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>