js原生事件委托table切换（自定义属性）

//样式效果不完善

<style>

      li {

        list-style: none;

      }

      ul {

        display: flex;

        justify-content: space-between;

        width: 30%;

        margin: auto;

      }

      ul li {

        width: 15%;

        height: 3%;

        border: 1px solid pink;

        text-align: center;

        color: #000;

      }

      p {

        margin: auto;

      }

      p img {

        width: 30%;

        margin-left: 550px;

        transition: all 3s ease-in-out;

      }

      .active {

        background: #ff6700;

        color: #fff;

      }

      .fade-in-out {

        opacity: 0;

        animation: fadeInOut 3s infinite;

      }

 

      @keyframes fadeInOut {

        0% {

          opacity: 1;

        }

        50% {

          opacity: 0.5;

        }

        100% {

          opacity: 1;

        }

      }

    </style>

//布局结构

 <div class="box">

      <ul>

        <li class="active" data-i="0">王昭君</li>

        <li data-i="1">吕布</li>

        <li data-i="2">庄周</li>

        <li data-i="3">不知火舞</li>

        <li data-i="4">安琪拉</li>

        <li data-i="5">周瑜</li>

      </ul>

      <p><img src="./1.webp" alt="" class="fade-in-out" /></p>

//js实现效果

<script>

//定义数据

        let arr = [

          {

            img: "./1.webp",

            title: "王昭君",

          },

          {

            img: "./2.webp",

            title: "吕布",

          },

          { img: "./3.webp", title: "庄周" },

          { img: "./4.webp", title: "不知火舞" },

          { img: "./5.webp", title: "安琪拉" },

          { img: "./6.webp", title: "周瑜" },

        ];

//获取元素

        const ul = document.querySelector("ul");

        const img = document.querySelector("p img");

//把点击事件委托给ul

        ul.addEventListener("click", function (e) {

//找到对应元素等于LI

          if (e.target.tagName === "LI") {

//先删除带有active的类名

            document.querySelector(".active").classList.remove("active");

//给对应元素添加

            e.target.classList.add("active");

//获取元素属性代替下标

            const i = e.target.dataset.i;

            img.src = `${arr[i].img}`;

            img.title = `${arr[i].title}`;

          }

        });

      </script>