Web APIs-事件基础

奋斗的咸鱼
131 阅读4分钟

一、事件

  • 什么是事件？

    • 事件是在编程时系统内发生的动作或者发生的事情
    • 比如用户在网页上单击一个按钮

  • 什么是事件监听？

    • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

  • 语法：元素.addEventListener('事件', 要执行的函数)

  • 事件监听三要素：

    • 事件源： 那个dom元素被事件触发了，要获取dom元素
    • 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
    • 事件调用的函数： 要做什么事

01-添加事件监听

<body>
    <button>点我啊</button>
    <p>点击有事发生</p>

    <script>
      let btn = document.querySelector('button')
      // btn:事件源：就是触发事件的dom元素
      // addEventListener：事件监听机制提供的一个方法，通过它可以为元素绑定一个事件，并且在事件触发之后，调用指定的函数一定要进行处理
      // 'click':事件类型，是指用户所进行操作，click代表单击，说明用户必须单击指定的元素才会触发事件
      // function(){}：事件触发之后的处理函数

      // 一：代码整体的意思是：我让事件监听机制帮我去监听用户是否进行的某个操作，同时给它提供一个处理函数，告诉它，如果用户真的进行了这个操作，那么调用我给的函数进行处理
      // 一.1:开发者知不知道用户什么时候进行某个操作，谁知道：事件监听机制知道，但是它不知道应该如何处理
      // 二.2:用户单击之后应该如何进行处理，开发者知道，但是我不知道用户是否单击了按钮
      // 1.这个函数是谁调用的？事件监听机制
      btn.addEventListener('click', function(){
        console.log(123);
      })
    </script>
  </body>
复制代码

02-点击关闭二维码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03-事件案例-点击关闭二维码</title>
    <style>
      .erweima {
        position: relative;

        width: 160px;
        height: 160px;

        margin: 100px auto;
      }

      span {
        position: absolute;
        left: -20px;
        top: 0;

        display: block;
        width: 20px;
        text-align: center;
        border: 1px solid #ccc;

        /* 鼠标效果 */
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="erweima">
      <img src="./images/code.png" alt="" />
      <span> X </span>
    </div>
    <script>
      let span = document.querySelector('span');
      let erweima = document.querySelector('.erweima');
      span.addEventListener('click', function(){
        erweima.style.display = 'none';
      })
    </script>
  </body>
</html>
复制代码

03-随机点名

<body>
    <p>这里显示名字</p>
    <button>随机点名</button>

    <script>
      let names = [
        '彭泉林',
        '徐祥庭',
        '温晓桢',
        '黄素蘭',
        '徐斌',
        '陈志浩',
        '王刘杰'
      ]
      // 获取元素
      let btn = document.querySelector('button');
      let p = document.querySelector('p');
      // 为按钮绑定点击事件
      btn.addEventListener('click',function(){
        // 生成随机数 -- 每次单机要生成一个新的随机数
        let index = parseInt(Math.random() * names.length);
        // 获取名字，为p元素设置内容
        p.innerHTML = names[index];
        // 删除刚刚的名字
        names.splice(index,1);
        // 判断姓名是否选择完毕
        if(names.length == 0){
          btn.disabled = true;
        }
      })
    </script>
  </body>
复制代码

04-随机点名-进阶版

<body>
    <p>这里显示名字</p>
    <button class="start">开始随机点名</button>
    <button class="end">结束随机点名</button>

    <script>
      let names = [
        '彭泉林',
        '徐祥庭',
        '温晓桢',
        '黄素蘭',
        '徐斌',
        '陈志浩',
        '王刘杰'
      ]

      let p = document.querySelector('p');
      let start = document.querySelector('.start');
      let end = document.querySelector('.end');
      let timeId,index;
      start.addEventListener('click',function(){
        timeId = setInterval(function(){
          index = parseInt(Math.random() * names.length);
          p.innerHTML = names[index];
        },100)
      })
      // 结束本次点名
      end.addEventListener('click',function(){
        // 停止定时器
        clearInterval(timeId);
        // 删除指定的名字
        names.splice(index,1);
        // 判断是否需要禁用按钮
        if(names.length == 0){
          start.disabled = true
          end.disabled = true
        }
      })
    </script>
  </body>
复制代码

05-事件的其它的绑定方式

<body>
    <button>点我啊</button>
    <script>
      let btn = document.querySelector('button')

      // btn.addEventListener('click',function(){})

      // on事件类型
      // onclick,onfocus,onblur,onmouseenter。。。
      btn.onclick = function() {
        console.log(123)
      }
      btn.onclick = function() {
        console.log(234)
      }
    </script>
  </body>
复制代码

06-常见的事件类型

  <body>
    <button>进入后弹出层</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <br />
    用户名：<input type="text" class="username" /> <br />
    密码：<input type="text" class="password" /> <br />

    <script>
      // 演示鼠标进入和离开事件
      let button = document.querySelector('button')
      let ul = document.querySelector('ul')
      let username = document.querySelector('.username')

      // 添加按键事件--了解
      username.addEventListener('keydown', function() {
        console.log('abc')
      })
      username.addEventListener('keyup', function() {
        console.log('1234')
      })

      // 聚集事件：输入框获取焦点(光标)会触发聚集事件
      username.addEventListener('focus', function() {
        // console.log(123)
      })
      // 失集事件：输入框失去焦点(光标)会触发失集事件
      username.addEventListener('blur', function() {
        // console.log(456)
      })

      button.addEventListener('mouseenter', function() {
        ul.style.display = 'block'
      })
      button.addEventListener('mouseleave', function() {
        ul.style.display = 'none'
      })
    </script>
  </body>
复制代码

07-自动切换图片-鼠标进入和离开事件的应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 700px;
        height: 320px;
        margin: 100px auto;
        position: relative;
      }
      p {
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 50px;
        background-color: #666;
        color: #fff;
        width: 100%;
        padding-left: 10px;
        font-size: 20px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./images/b01.jpg" alt="" />
      <p>第1张图片</p>
    </div>

    <script>
      // 1.获取元素
      let img = document.querySelector('img')
      let p = document.querySelector('p')
      let div = document.querySelector('div')

      let index = 1

      let timeId = setInterval(function() {
        index++
        if (index > 9) {
          index = 1
        }
        img.src = `./images/b0${index}.jpg`
        p.innerHTML = `第${index}张图片`
      }, 1000)

      // 为整个轮播图添加鼠标进入和离开的事件
      // 鼠标进入：停止定时器
      div.addEventListener('mouseenter', function() {
        clearInterval(timeId)
      })

      // 鼠标离开，重启定时器
      div.addEventListener('mouseleave', function() {
        timeId = setInterval(function() {
          index++
          if (index > 9) {
            index = 1
          }
          img.src = `./images/b0${index}.jpg`
          p.innerHTML = `第${index}张图片`
        }, 1000)
      })
    </script>
  </body>
</html>
复制代码

08-其它事件类型

<body>
    手机号：<input type="text" /> <span>手机号输入不合法</span> <br />
    <!-- 文件域：让用户选择文件，我们会实现文件上传 -->
    <input type="file" />
    <script>
      let phone = document.querySelector('input:nth-of-type(1)')
      let myfile = document.querySelector('input:nth-of-type(2)')

      // 对于文件域，我们应该在用户选定文件之后 (点击选择文件对话框的打开)进行文件上传
      myfile.addEventListener('change', function() {
        console.log('文件选好了，准备上传')
      })

      // 失焦事件：只要失去焦点，就会触发
      // phone.addEventListener('blur', function() {
      //   console.log('blur')
      // })

      // // 失焦事件change:失去焦点，同时内容变化 才会触发
      // phone.addEventListener('change', function() {
      //   console.log('change')
      // })

      // // 为输入框添加input事件，只要内容变化 就会触发
      // phone.addEventListener('input', function() {
      //   console.log(phone.value)
      // })
    </script>
  </body>
复制代码

09-小米搜索框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09-小米搜索框</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
        display: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>

    <script>
      // 当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
      let input = document.querySelector('input')
      let ul = document.querySelector('ul')

      input.addEventListener('focus', function() {
        ul.style.display = 'block'
      })

      input.addEventListener('blur', function() {
        ul.style.display = 'none'
      })
    </script>
  </body>
</html>
复制代码

10-微博模板

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.w {
  width: 900px;
  margin:0 auto;
}
.controls textarea {
  width: 878px;
  height: 100px;
  resize: none;
  border-radius: 10px;
  outline:none;
  padding-left: 20px;
  padding-top:10px;
  font-size: 18px;
}
.controls {
  overflow: hidden;
}

.controls div {
  float: right;
}
.controls div span {
  color:#666;
}
.controls div .useCount {
  color:red;
}
.controls div button {
  width: 100px;
  outline: none;
  border:none;
  background: rgb(0, 132, 255);
  height: 30px;
  cursor: pointer;
  color:#fff;
  font:bold 14px '宋体';
  transition: all 0.5s;
}
.controls div button:hover {
  background: rgb(0, 225, 255);
}
.controls div button:disabled {
  background: rgba(0, 225, 255,0.5);
}
.contentList {
  margin-top:50px;
}
.contentList li {
  padding: 20px 0;
  border-bottom: 1px dashed #ccc;
}
.contentList li .info {
  position: relative;
}
.contentList li .info span {
  position: absolute;
  top:15px;
  left:100px;
  font:bold 16px '宋体';
}
.contentList li .info p {
  position: absolute;
  top:40px;
  left: 100px;
  color:#aaa;
  font-size: 12px;
}
.contentList img {
  width: 80px;
  border-radius: 50%;
}
.contentList li .content {
  padding-left: 100px;
  color: #666;
  word-break: break-all;
}
复制代码

<body>
    <div class="w">
      <div class="controls">
        <img src="images/tip.png" alt="" /><br />
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <div class="contentList">
        <ul></ul>
      </div>
    </div>
    <script>
      // 用户输入文字，可以计算用户输入的字数:input
      let area = document.querySelector('#area')
      let useCount = document.querySelector('.useCount')

      // 为文本域添加input内容改变事件
      area.addEventListener('input', function() {
        // 获取文本域的内容
        let content = area.value
        // 获取内容的长度
        let count = content.length
        // 将长度赋值 给批指定的元素
        useCount.innerHTML = count
      })
    </script>
  </body>
复制代码

11-全选反选案例（一）

<!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>10-全选反选案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>

    <script>
      //需求1 "单击全选复选框,让列表中的所有复选框的状态和全选的一致
      // 1.获取元素: 全选 -querySelector 列表中的所有复选框-querySelectorAll
      let chkAll = document.querySelector('#checkAll')
      let chks = document.querySelectorAll('.ck') // 伪数组，需要遍历使用
      let all = document.querySelector('.all') // 全选复选框对应的文本

      // 2. 为  全选  添加 click/change 事件,在事件处理函数中
      chkAll.addEventListener('click', function() {
        //   2.1 先获取全选复选框的checked状态:true/false
        let state = chkAll.checked
        //   2.2 遍历列表中的所有复选框,为其checked属性设置状态
        chks.forEach(function(ele, index) {
          ele.checked = state
        })
        //   2.3 修改文本内容
        all.innerHTML = state ? '取消' : '全选'
      })

      // 需求2：单击列表中的复选框，影响 全选复选框
      // 1。经过本次单击，如果列表中的复选框全部选中，则全选也选中
      // 2。经过这次单击，如果列表中的复选框有一个没有选中，则全选也取消选中

      // 1.先为列表中所有复选框添加单击事件：遍历之后，一个一个绑定事件
      chks.forEach(function(ele, index) {
        // 为遍历出的复选框绑定事件
        ele.addEventListener('click', function() {
          // 我先假设是被选中的
          chkAll.checked = true

          // 遍历列表中的所有复选框,但凡有一个没有选中,则全选也不选中,全部 选中了全选才选中
          chks.forEach(function(ele) {
            if (ele.checked == false) {
              chkAll.checked = false
            }
          })

          all.innerHTML = chkAll.checked ? '取消' : '全选'
        })
      })
    </script>
  </body>
</html>
复制代码

12-全选反选案例-基于数量进行比较

<script>
      //需求1 "单击全选复选框,让列表中的所有复选框的状态和全选的一致
      // 1.获取元素: 全选 -querySelector 列表中的所有复选框-querySelectorAll
      let chkAll = document.querySelector('#checkAll')
      let chks = document.querySelectorAll('.ck') // 伪数组，需要遍历使用
      let all = document.querySelector('.all') // 全选复选框对应的文本

      // 2. 为  全选  添加 click/change 事件,在事件处理函数中
      chkAll.addEventListener('click', function() {
        //   2.1 先获取全选复选框的checked状态:true/false
        let state = chkAll.checked
        //   2.2 遍历列表中的所有复选框,为其checked属性设置状态
        chks.forEach(function(ele, index) {
          ele.checked = state
        })
        //   2.3 修改文本内容
        all.innerHTML = state ? '取消' : '全选'
      })

      // 需求2：单击列表中的复选框，影响 全选复选框
      // 1。经过本次单击，如果列表中的复选框全部选中，则全选也选中
      // 2。经过这次单击，如果列表中的复选框有一个没有选中，则全选也取消选中

      // 1.先为列表中所有复选框添加单击事件：遍历之后，一个一个绑定事件
      chks.forEach(function(ele, index) {
        // 为遍历出的复选框绑定事件
        ele.addEventListener('click', function() {
          // 定义一个变量用于记录被选中的复选框的数量
          let cnt = 0
          // 遍历列表中的所有复选框,但凡有一个没有选中,则全选也不选中,全部 选中了全选才选中
          chks.forEach(function(ele) {
            if (ele.checked == true) {
              cnt++
            }
          })
          chkAll.checked = cnt == chks.length

          all.innerHTML = chkAll.checked ? '取消' : '全选'
        })
      })
    </script>
复制代码

13-全选反选案例-基于数量进行比较简化版

<script>
      //需求1 "单击全选复选框,让列表中的所有复选框的状态和全选的一致
      // 1.获取元素: 全选 -querySelector 列表中的所有复选框-querySelectorAll
      let chkAll = document.querySelector('#checkAll')
      let chks = document.querySelectorAll('.ck') // 伪数组，需要遍历使用
      let all = document.querySelector('.all') // 全选复选框对应的文本

      // 2. 为  全选  添加 click/change 事件,在事件处理函数中
      chkAll.addEventListener('click', function() {
        //   2.1 先获取全选复选框的checked状态:true/false
        let state = chkAll.checked
        //   2.2 遍历列表中的所有复选框,为其checked属性设置状态
        chks.forEach(function(ele, index) {
          ele.checked = state
        })
        //   2.3 修改文本内容
        all.innerHTML = state ? '取消' : '全选'
      })

      // 需求2：单击列表中的复选框，影响 全选复选框
      // 1。经过本次单击，如果列表中的复选框全部选中，则全选也选中
      // 2。经过这次单击，如果列表中的复选框有一个没有选中，则全选也取消选中

      // 1.先为列表中所有复选框添加单击事件：遍历之后，一个一个绑定事件
      chks.forEach(function(ele, index) {
        // 为遍历出的复选框绑定事件
        ele.addEventListener('click', function() {
          // :checked:获取被选中的复选框
          let state =
            document.querySelectorAll('.ck:checked').length == chks.length
          chkAll.checked = state

          all.innerHTML = state ? '取消' : '全选'
        })
      })
</script>
复制代码

14-购物车加减操作

<body>
    <div>
      <input type="text" id="total" value="4" readonly />
      <input type="button" value="+" id="add" />
      <input type="button" value="-" id="reduce" />
    </div>
    <script>
      // 用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号
      let add = document.querySelector('#add')
      let reduce = document.querySelector('#reduce')
      let total = document.querySelector('#total')

      // +
      add.addEventListener('click', function() {
        // 1.获取文本框的值
        let v = total.value
        // 2.自增: ++会自动的转换类型为数值
        v++
        // 3.重新赋值
        total.value = v
        // 重新启用减
        reduce.disabled = false
      })

      // -
      reduce.addEventListener('click', function() {
        // 1.获取文本框的值
        let v = total.value
        // 2.自减:--会自动的转换类型为数值
        v--
        // 3.重新赋值
        total.value = v

        // 如果值为1，则禁用按钮
        if (v == 1) {
          reduce.disabled = true
        }
      })
    </script>
  </body>
复制代码

15-高阶函数

  • 高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
  • 【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
// 函数表达式与普通函数本质上是一样的
let counter = function (x, y) {
    return x + y
}
// 调用函数
let result = counter(5, 10)
console.log(result)

// 普通函数的声明与调用无顺序限制，推荐做法先声明再调用
// 函数表达式必须先声明再调用
复制代码
  • 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
  • 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
function fn() {
    console.log('我是回调函数')
}
// fn传递给了setInterval, fn就是回调函数
setInterval(fn, 1000)

box.addEventListener('click', function() {
    console.log('我也是回调函数')
})
复制代码

16-this的使用介绍

  • 环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
  • 作用：弄清楚this的指向，可以让我们代码更简洁
  • 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
<body>
    <div>
      <button>点名了1</button>
      <button>点名了2</button>
      <button>点名了3</button>
    </div>
    <script>
      let btns = document.querySelectorAll('button')

      btns.forEach(function(ele) {
        // 当前谁触发的事件，谁就是事件处理函数中的this
        // this是一个抽象对象
        ele.addEventListener('click', function() {
          console.log(this)

          // ele.style.color = 'red'
          this.style.color = 'red'
        })
      })
    </script>
  </body>
复制代码

17-排他思想

 <style>
      ul {
        list-style: none;
        width: 600px;
        display: flex;
        height: 50px;
      }
      li {
        flex: 1;
        background-color: #ccc;
        border-right: 1px solid blue;
        line-height: 50px;
        text-align: center;
      }
      .active {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="active">首页</li>
      <li>文章列表</li>
      <li>发表文章</li>
      <li>关于我们</li>
    </ul>

    <script>
      // 需求：
      // 1.单击li元素，在事件处理函数中
      // 1.1.先清除所有li元素的active样式
      // 1.2 为当前被单击的li元素添加active

      let lis = document.querySelectorAll('li')
      // 遍历，为每一个li元素绑定事件
      lis.forEach(function(ele) {
        ele.addEventListener('click', function() {

          // 先清除所有li元素的active样式:遍历，拿到每一个li元素，添加样式
          lis.forEach(function(subele) {
            subele.classList.remove('active')
          })

          ele.classList.add('active')
          // ele.className = 'active'

          
        })
      })
    </script>
  </body>
</html>

复制代码

18-排他思想-优化

<script>
      // 需求：
      // 1.单击li元素，在事件处理函数中
      // 1.1.找到当前有active样式的li元素，清除这个li元素的active样式
      // 1.2 为当前被单击的li元素添加active

      let lis = document.querySelectorAll('li')
      // 遍历，为每一个li元素绑定事件
      lis.forEach(function(ele) {
        ele.addEventListener('click', function() {
          // 找到当前有active样式的li元素，清除这个li元素的active样式
          // li.active:要求找到li元素，同时li元素有active样式 -- 交集选择器
          document.querySelector('.list > li.active').classList.remove('active')

          // 为当前被单击的li元素添加active
          ele.classList.add('active')
        })
      })
</script>
复制代码

19-tab栏案例

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
      }

      .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
      }

      .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
      }

      .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
      }

      .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
      }

      .products .main {
        float: left;
        display: none;
      }

      .products .main.active {
        display: block;
      }

      .tab li.active {
        border-color: red;
        border-bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
      </ul>
      <div class="products">
        <div class="main active">
          <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
      </div>
    </div>

    <script>
      // 获取元素
      let lis = document.querySelectorAll('.wrapper li')
      let mains = document.querySelectorAll('.products .main')

      // 伪数组的使用先遍历
      lis.forEach(function(ele,index) {
        ele.addEventListener('click', function() {
          // 排他li
          // 获取有active样式的li元素，干掉它的active样式
          document.querySelector('.wrapper li.active').classList.remove('active')
          // 为当前被单击的li元素添加active样式
          // lis[index].classList.add('active')
          ele.classList.add('active')
          // this.classList.add('active')
          console.log(index);
          
          // 排他main
          document.querySelector('.products .main.active').classList.remove('active')
          mains[index].classList.add('active')
        })
      })
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝