Web APIs知识点讲解(阶段二)

洛小yuan

已于 2024-03-26 20:14:44 修改

阅读量594

点赞数 9

文章标签： html5 前端 html

于 2024-02-29 22:22:17 首次发布

本文链接：https://blog.youkuaiyun.com/2201_76041915/article/details/136308803

版权

本文围绕前端开发展开，介绍了DOM事件基础，包括事件监听三要素、不同版本的事件监听及多种事件类型，并给出多个相关案例。还讲解了高阶函数，如函数表达式和回调函数，以及环境变量中this的指向，最后通过Tab栏切换案例进行实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM-事件基础

一.事件

1.事件

目标：能够给 DOM元素添加事件监听

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

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

语法:

事件监听三要素:

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

举例说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>
<body>
    <button>点击我</button>
    <script>
        //1.获取按钮元素
        let btn = document.querySelector('button')
        //2.事件监听  绑定事件 注册事件  事件侦听
        // 事件源.addEventListener('事件',事件处理函数)
        btn.addEventListener('click',function(){
            alert('月薪过万')
        })
    </script>
</body>
</html>

案例：淘宝点击关闭二维码

需求：点击关闭之后，淘宝二维码关闭案例分析： ①：点击的是关闭按钮 ②：关闭的是父盒子核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .erweima {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        .erweima i {
            position: absolute;
            left: -13px;
            top: 0;
            width: 10px;
            height: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 10px;
            color: #ccc;
            font-style: normal;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="erweima">
        <img src="./images/code.png" alt="">
        <i class="close_btn">x</i>
    </div>
    <script>
    //1.获取元素 事件源i 关闭的二维码erweima
    let close_btn = document.querySelector('.close_btn')
    let erweima = document.querySelector('.erweima')
    //2.事件监听
    close_btn .addEventListener('click',function(){
        //erweima 关闭 他是隐蔽的
        erweima.style.display = 'none'
    })

    </script>
</body>

</html>

案例：随机点名

需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮案例分析： ①：点击的是按钮 ②：随机抽取一个名字 ③：当名字抽取完毕，则利用 disabled 设置为 true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>开始抽奖吧</div>
    <button>点击点名</button>
    <script>
        //1.获取元素 div 和 button
        let box = document.querySelector('div')
        let btn = document.querySelector('button')
        //2.随机函数
        function getRandom(min,max){
            return Math.floor(Math.random()*(max - min + 1)) + min
        } 
        //声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操','pink老师']
        //3.事件监听
        btn.addEventListener('click',function(){
            //随机的数字
            let random = getRandom(0,arr.length - 1)
            console.log(arr[random])
            box.innerHTML = arr[random]
            //删除数组里面的元素 splice(从那里删，删几个)
            arr.splice(random,1)
            //如果数组里面剩下最后一个，就要禁用按钮
            if (arr.length === 1){
                // console.log('最后一个')
                btn.disabled = true
                btn.innerHTML = '已经抽完'
            }
        })
    </script>
</body>
</html>

随机点名案例

需求：点击开始随机抽取，点击结束输出结果业务分析： ① 点击开始按钮随机抽取数组的一个数据，放到页面中 ② 点击结束按钮删除数组当前抽取的一个数据 ③ 当抽取到最后一个数据的时候，两个按钮同时禁用核心：利用定时器快速展示，停止定时器结束展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        h2{
            text-align:center;
        }
        .box{
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }
        .qs{
            width: 450px;
            height: 40px;
            color:red ;
        }
        .btns button{
            text-align: center;
        }
        .btns button{
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>
<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是:</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        //数据数组
        let arr = ['马超','黄忠','赵云','关羽','张飞']
        function getRandom(min,max){
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        //1.获取元素  两个按钮 + div
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        //timer 要是全局变量
        let timer = 0
        //2.给开始按钮注册事件
        start.addEventListener('click',function(){
            //随机抽数据---快速不断的抽取 间歇函数定时器
            timer = setInterval(function(){
                let random = getRandom(0,arr.length-1)
                qs.innerHTML = arr[random]
            },25)
        })

        //3.给结束按钮注册事件  本质是停止定时器
        end.addEventListener('click',function(){
            //停止定时器
            clearInterval(timer)
        })
    </script>
</body>
</html>

2.拓展阅读-事件监听版本

DOM L0

事件源.on事件 = function() { }

DOM L2

事件源.addEventListener(事件，事件处理函数)

发展史：

DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3.事件类型

鼠标事件：鼠标触发

click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开

焦点事件：表单获得光标

focus 获得焦点 blur 失去焦点

键盘事件：键盘触发

Keydown 键盘按下触发 Keyup 键盘抬起触

文本事件：表单输入触发

input 用户输入事件

案例一：

小米搜索框案例需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单案例分析： ①：开始下拉菜单要进行隐藏 ②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类） ③：表单失去焦点，反向操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米搜索框</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: 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;
            transition: all .3s;
        }
        .mi .search{
            border: 1px solid #ff6700;
        }
        .result-list{
            display: none;
            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>
        //1.获取元素 input
        let search = document.querySelector('input[type=search]')
        let list = document.querySelector('.result-list')
        //2.事件监听 获得光标事件 focus
        search.addEventListener('mouseenter',function(){
            //显示下拉菜单
            list.style.display = 'block'
            //文本框变色
            search.classList.add('search')
        })
        //3.事件监听 失去光标事件 blur
        search.addEventListener('blur',function(){
            //隐藏下拉菜单
            list.style.display = 'none'
            //文本框去色
            search.classList.remove('search')
        })
    </script>
</body>
</html>

案例二：

微博输入案例需求：用户输入文字，可以计算用户输入的字数案例分析： ①：判断用输入事件 input ②：不断取得文本框里面的字符长度 ③：把获得数字给下面文本框

css:

* {
  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;
}

weibo模板.html

<!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>
  <link rel="stylesheet" href="css/weibo.css">
</head>

<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>
    //1.获取元素 文本域 count
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')
    //2.绑定事件 用户输入事件 input
    area.addEventListener('input',function(){
      //console.log('测试中')
      //不断得到文本域里面的字符长度
      //area.value 可以得到的值
      // console.log(area.value)
      //area.value.length 得到输入字符长度
      // console.log(area.value.length)
      useCount.innerHTML = area.value.length
    })
  </script>
</body>

</html>

案例三:

全选文本框案例1 需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化案例分析： ①：全选复选框点击，可以得到当前按钮的 checked ②：把下面所有的小复选框状态checked，改为和全选复选框一致 ③：如果当前处于选中状态，则把文字改为取消，否则反之

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
        }
        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. 获取元素 全选 和小复选框
        let all = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let span = document.querySelector('span')
        //2.事件监听 全选按钮
        all.addEventListener('click',function(){
            // console.log(all.checked)  //true false
            //我们需要做的就是把all.checked 给下面三个小按钮
            //因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依此给值
            for(let i =0;i < cks.length;i++){
                cks[i].checked=all.checked
            }
            //当我们的全选按钮处于选中状态，则可以改为取消
            if (all.checked){
                span.innerHTML='取消'
            }  else{
                span.innerHTML='全选'
            }
        })
      </script>
</body>
</html>

案例四：

全选文本框案例2 需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化案例分析： ①：遍历下面的所有的checkbox,添加点击事件 ②：在事件内部,遍历所有的checkbox状态,只要有一个为false 就将全选状态设置为false , 把文字改为全选，并且直接return (退出循环) ③：在循环结束将全选的状态直接设置为true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
        }
        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. 获取元素 全选 和小复选框
        let all = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let span = document.querySelector('span')
        //2.事件监听 全选按钮
        all.addEventListener('click',function(){
            // console.log(all.checked)  //true false
            //我们需要做的就是把all.checked 给下面三个小按钮
            //因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依此给值
            for(let i =0;i < cks.length;i++){
                cks[i].checked=all.checked
            }
            //当我们的全选按钮处于选中状态，则可以改为取消
            if (all.checked){
                span.innerHTML='取消'
            }  else{
                span.innerHTML='全选'
            }
        })


        //3.小按钮的做法 同时给多个元素绑定相同事件
        for (let i = 0;i<cks.length;i++){
            //绑定事件
            cks[i].addEventListener('click',function(){
                // console.log(11)
                //只要点击任何一个小按钮，都需要遍历所有的小按钮
                for (let j =0;j < cks.length;j++){
                  //都来看看是不是有人没有选中
                  if (cks[j].checked ===false){
                    //如果有false 则退出循环
                    all.checked = false
                    span.innerHTML = '全选'
                    return
                  }
                }

                //当我们的循环结束，如果代码走到这里，说明没有false,都被选中了
                all.checked = true
                span.innerHTML = '取消'
            })
        }
      </script>

案例五:

购物车加减操作需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号案例分析： ①：给添加按钮注册点击事件, 获取表单的value,然后自增 ②：解除减号的disabled状态 ③：给减号按钮添加点击事件,获取表单的value,然后自减 ④：自减结束需要判断,如果结果小于等于1 则添加上disabled状态


<!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>
    div {
      width: 80px;
    }

    input[type=text] {
      width: 50px;
      height: 44px;
      outline: none;
      border: 1px solid #ccc;
      text-align: center;
      border-right: 0;
    }

    input[type=button] {
      height: 24px;
      width: 22px;
      cursor: pointer;
    }

    input {
      float: left;
      border: 1px solid #ccc;

    }
  </style>
</head>

<body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
    <script>
        //1.获取元素 三个
        let total = document.querySelector("#total")
        let add = document.querySelector("#add")
        let reduce = document.querySelector('#reduce')
        //2.点击加号 事件侦听
        add.addEventListener('click',function(){
            //console.log(typeof total.value)
            // total.value = total.value + 1
            //i++  隐式转换
            //i = i + 1
            total.value++
            reduce.disabled = false
        })
        //2.点击减号 事件侦听
        reduce.addEventListener('click',function(){
        //console.log(typeof total.value)
        // total.value = total.value + 1
        //i++  隐式转换
        //i = i + 1
            total.value--
            if (total.value <= 1){
                reduce.disabled = true
        }
    
        })
    </script>
  </div>
</body>

</html>

二.高阶函数

目标：掌握高阶函数用法，实现函数更多使用形式

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。

【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

1.函数表达式

函数表达式和普通函数并无本质上的区别：

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用

2.回调函数

目标：能够说出什么是回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景：

回调函数要等条件全部满足之后才会被调用。

三.环境变量

目标：能够分析判断函数运行在不同环境中 this 所指代的对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        //环境对象 this 他就是个对象
        function fn(){
            console.log(this)
        }
        //fn()
        window.fn()

        let btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            console.lof(typeof this)
            //因为btn 调用了这个函数，所以This指向btn
        })
    </script>
</body>
</html>

编程思想：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink{
            background: pink;
        }
    </style>
</head>
<body>
    <button>第一个</button><button>第二个</button><button>第三个</button><button>第四个</button><button>第五个</button>
    <script>
        let btns = document.querySelector('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // this.classList.add('pink')
                // 干掉所有人
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('pink')
                }
                // 复活我自己
                this.classList.add('pink')
            })
        }
    </script>
</body>
</html>

排他思想升级:

<!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>Document</title>
    <style>
        .pink {
            background: pink;
        }
    </style>
</head>

<body>
    <button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // this.classList.add('pink')
                // // 干掉所有人
                // for (let j = 0; j < btns.length; j++) {
                //     btns[j].classList.remove('pink')
                // }
                // 我只需要找出那个唯一的 pink类，删除
                document.querySelector('.pink').classList.remove('pink')
                // 我的
                this.classList.add('pink')
            })
        }
    </script>
</body>

</html>

四.案例

1.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>
    //0.获取元素
    //得到所有的小li  querySelectorAll是类选择器(一定不要忘记添加类选择器)
    let lis = document.querySelectorAll('.tab .tab-item')
    let divs = document.querySelectorAll('.products .main')
    //1.头部tab栏切换模式
    //1.先给四个小Li添加点击事件
    for (let i = 0;i<lis.length;i++){
      lis[i].addEventListener('click',function(){
        // console.log(li)
        // 找到以前的active 类，移除掉
        document.querySelector('.tab .active').classList.remove('active')
        //当前的元素添加
        this.classList.add('active')


         //2.底部显示隐藏模块  一定要写在点击事件里面，li变化的时候main跟着变化
         document.querySelector('.products .active').classList.remove('active')
        //div对应序号的那个加上div
         divs[i].classList.add('active')
      })
    }
    

  </script>
</body>

</html>