webapi最两种好用的排他,快来安排上

最新推荐文章于 2022-04-28 22:19:16 发布

小阳阳i

最新推荐文章于 2022-04-28 22:19:16 发布

阅读量95

点赞数

文章标签： web

本文链接：https://blog.csdn.net/weixin_46474841/article/details/123882879

版权

1.循环排他(炸弹型)

效果图: 鼠标移入图片时透明度为1 其他盒子透明度为0.5

在这里插入图片描述

知识点: 循环排他应用于多个选项只选一个

思路:1.获取元素 2.给每一个li元素注册鼠标移入事件3.干死所有兄弟(统一所有li的样式)4.再给自己添加样式

代码:

<script>
    //1.获取变量
    let liList = document.querySelectorAll('.wrap li')
    console.log(liList);
    //2.给每一个li注册鼠标移入事件
    for (let i = 0; i < liList.length; i++) {
      liList[i].onmouseenter = function () {
        //3.干死所有兄弟 给所有兄弟都添加统一的样式
        for (let j = 0; j < liList.length; j++) {
          liList[j].style.opacity = 0.5
        }
        //4.再给自己添加样式
        this.style.opacity = 1
      }
    }
  </script>

2.类名排他(狙击枪型)
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4E7TzxV-1648730612664)(C:\Users\yangqing\AppData\Roaming\Typora\typora-user-images\1648475229120.png)]$

知识点:获取类名排他

思路:1.获取元素.2.给每一个按钮注册点击事件 3.通过获取类名找到元素移除类名 4.给自己添加类名

<script>
    //1.获取元素
    let liList = document.querySelectorAll('.tab-item')
    let mainList = document.querySelectorAll('.main')
    //2.给每个li注册点击事件
    for (let i = 0; i < liList.length; i++) {
      liList[i].onclick = function () {
        //3.通过类名获取元素.移除类名
        document.querySelector('.active').classList.remove('active')
        document.querySelector('.selected').classList.remove('selected')

        //4.复活自己 给自己添加类名
        liList[i].classList.add('active')
        mainList[i].classList.add('selected')
      }
    }
  </script>