• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（二）

    思维导图

    一、事件监听（绑定）

    1.1 事件监听

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <button>点击button>
    13.   <script>
    14.     // 需求： 点击了按钮，弹出一个对话框
    15.     // 1. 事件源   按钮  
    16.     // 2.事件类型 点击鼠标   click 字符串
    17.     // 3. 事件处理程序 弹出对话框
    18.     const btn = document.querySelector('button')
    19.     btn.addEventListener('click', function () {
    20.       alert('你早呀~')
    21.     })
    22.  
    23.   script>
    24. body>
    25.  
    26. html>

    1. 李伟兴 09:31:13
    2. html>
    3. <html lang="en">
    4.  
    5. <head>
    6.   <meta charset="UTF-8">
    7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.   <title>Documenttitle>
    10.   <style>
    11.     .box {
    12.       position: relative;
    13.       width: 1000px;
    14.       height: 200px;
    15.       background-color: pink;
    16.       margin: 100px auto;
    17.       text-align: center;
    18.       font-size: 50px;
    19.       line-height: 200px;
    20.       font-weight: 700;
    21.     }
    22.  
    23.     .box1 {
    24.       position: absolute;
    25.       right: 20px;
    26.       top: 10px;
    27.       width: 20px;
    28.       height: 20px;
    29.       background-color: skyblue;
    30.       text-align: center;
    31.       line-height: 20px;
    32.       font-size: 16px;
    33.       cursor: pointer;
    34.     }
    35.   style>
    36. head>
    37.  
    38. <body>
    39.   <div class="box">
    40.     我是广告
    41.     <div class="box1">Xdiv>
    42.   div>
    43.   <script>
    44.     // 1. 获取事件源
    45.     const box1 = document.querySelector('.box1')
    46.     //  关闭的是大盒子
    47.     const box = document.querySelector('.box')
    48.     // 2. 事件侦听
    49.     box1.addEventListener('click', function () {
    50.       box.style.display = 'none'
    51.     })
    52.   script>
    53. body>
    54.  
    55. html>

    解惑：

    js垃圾回收机制，函数执行完后，声明的变量回收，下次执行时再创建新的。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <button>点击button>
    13.   <script>
    14.     const btn = document.querySelector('button')
    15.     btn.addEventListener('click', function () {
    16.       const num = Math.random()
    17.       console.log(num)
    18.     })
    19.   script>
    20. body>
    21.  
    22. html>

    1.2 拓展阅读-事件监听版本

    二、事件类型

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>轮播图点击切换title>
    9.   <style>
    10.     * {
    11.       box-sizing: border-box;
    12.     }
    13.  
    14.     .slider {
    15.       width: 560px;
    16.       height: 400px;
    17.       overflow: hidden;
    18.     }
    19.  
    20.     .slider-wrapper {
    21.       width: 100%;
    22.       height: 320px;
    23.     }
    24.  
    25.     .slider-wrapper img {
    26.       width: 100%;
    27.       height: 100%;
    28.       display: block;
    29.     }
    30.  
    31.     .slider-footer {
    32.       height: 80px;
    33.       background-color: rgb(100, 67, 68);
    34.       padding: 12px 12px 0 12px;
    35.       position: relative;
    36.     }
    37.  
    38.     .slider-footer .toggle {
    39.       position: absolute;
    40.       right: 0;
    41.       top: 12px;
    42.       display: flex;
    43.     }
    44.  
    45.     .slider-footer .toggle button {
    46.       margin-right: 12px;
    47.       width: 28px;
    48.       height: 28px;
    49.       appearance: none;
    50.       border: none;
    51.       background: rgba(255, 255, 255, 0.1);
    52.       color: #fff;
    53.       border-radius: 4px;
    54.       cursor: pointer;
    55.     }
    56.  
    57.     .slider-footer .toggle button:hover {
    58.       background: rgba(255, 255, 255, 0.2);
    59.     }
    60.  
    61.     .slider-footer p {
    62.       margin: 0;
    63.       color: #fff;
    64.       font-size: 18px;
    65.       margin-bottom: 10px;
    66.     }
    67.  
    68.     .slider-indicator {
    69.       margin: 0;
    70.       padding: 0;
    71.       list-style: none;
    72.       display: flex;
    73.       align-items: center;
    74.     }
    75.  
    76.     .slider-indicator li {
    77.       width: 8px;
    78.       height: 8px;
    79.       margin: 4px;
    80.       border-radius: 50%;
    81.       background: #fff;
    82.       opacity: 0.4;
    83.       cursor: pointer;
    84.     }
    85.  
    86.     .slider-indicator li.active {
    87.       width: 12px;
    88.       height: 12px;
    89.       opacity: 1;
    90.     }
    91.   style>
    92. head>
    93.  
    94. <body>
    95.   <div class="slider">
    96.     <div class="slider-wrapper">
    97.       <img src="./images/slider01.jpg" alt="" />
    98.     div>
    99.     <div class="slider-footer">
    100.       <p>对人类来说会不会太超前了？p>
    101.       <ul class="slider-indicator">
    102.         <li class="active">li>
    103.         <li>li>
    104.         <li>li>
    105.         <li>li>
    106.         <li>li>
    107.         <li>li>
    108.         <li>li>
    109.         <li>li>
    110.       ul>
    111.       <div class="toggle">
    112.         <button class="prev"><button>
    113.         <button class="next">>button>
    114.       div>
    115.     div>
    116.   div>
    117.   <script>
    118.     // 1. 初始数据
    119.     const data = [
    120.       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.     ]
    129.     // 获取元素
    130.     const img = document.querySelector('.slider-wrapper img')
    131.     const p = document.querySelector('.slider-footer p')
    132.     const footer = document.querySelector('.slider-footer')
    133.     // 1. 右按钮业务
    134.     // 1.1 获取右侧按钮 
    135.     const next = document.querySelector('.next')
    136.     let i = 0  // 信号量 控制播放图片张数
    137.     // 1.2 注册点击事件
    138.  
    139.     next.addEventListener('click', function () {
    140.       // console.log(11)
    141.       i++
    142.       // 1.6判断条件  如果大于8 就复原为 0
    143.       // if (i >= 8) {
    144.       //   i = 0
    145.       // }
    146.       i = i >= data.length ? 0 : i
    147.       // 1.3 得到对应的对象
    148.       // console.log(data[i])
    149.       // 调用函数
    150.       toggle()
    151.     })
    152.  
    153.     // 2. 左侧按钮业务
    154.     // 2.1 获取左侧按钮 
    155.     const prev = document.querySelector('.prev')
    156.     // 1.2 注册点击事件
    157.     prev.addEventListener('click', function () {
    158.       i--
    159.       // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
    160.       // if (i < 0) {
    161.       //   i = 7
    162.       // }
    163.       i = i < 0 ? data.length - 1 : i
    164.       // 1.3 得到对应的对象
    165.       // console.log(data[i])
    166.       // 调用函数
    167.       toggle()
    168.     })
    169.  
    170.     // 声明一个渲染的函数作为复用
    171.     function toggle() {
    172.       // 1.4 渲染对应的数据
    173.       img.src = data[i].url
    174.       p.innerHTML = data[i].title
    175.       footer.style.backgroundColor = data[i].color
    176.       // 1.5 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
    177.       document.querySelector('.slider-indicator .active').classList.remove('active')
    178.       document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    179.     }
    180.  
    181.  
    182.  
    183.     // 3. 自动播放模块
    184.     let timerId = setInterval(function () {
    185.       // 利用js自动调用点击事件  click()  一定加小括号调用函数
    186.       next.click()
    187.     }, 1000)
    188.  
    189.  
    190.     // 4. 鼠标经过大盒子，停止定时器
    191.     const slider = document.querySelector('.slider')
    192.     // 注册事件
    193.     slider.addEventListener('mouseenter', function () {
    194.       // 停止定时器
    195.       clearInterval(timerId)
    196.     })
    197.  
    198.     // 5. 鼠标离开大盒子，开启定时器
    199.     // 注册事件
    200.     slider.addEventListener('mouseleave', function () {
    201.       // 停止定时器
    202.       if (timerId) clearInterval(timerId)
    203.       // 开启定时器
    204.       timerId = setInterval(function () {
    205.         // 利用js自动调用点击事件  click()  一定加小括号调用函数
    206.         next.click()
    207.       }, 1000)
    208.     })
    209.   script>
    210. body>
    211.  
    212. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <input type="text">
    13.   <script>
    14.     const input = document.querySelector('input')
    15.     input.addEventListener('focus', function () {
    16.       console.log('有焦点触发')
    17.     })
    18.     input.addEventListener('blur', function () {
    19.       console.log('失去焦点触发')
    20.     })
    21.   script>
    22. body>
    23.  
    24. html>

    键盘事件

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <input type="text">
    13.   <script>
    14.     const input = document.querySelector('input')
    15.     // 1. 键盘事件
    16.     // input.addEventListener('keydown', function () {
    17.     //   console.log('键盘按下了')
    18.     // })
    19.     // input.addEventListener('keyup', function () {
    20.     //   console.log('键盘谈起了')
    21.     // })
    22.     // 2. 用户输入文本事件  input
    23.     input.addEventListener('input', function () {
    24.       console.log(input.value)
    25.     })
    26.   script>
    27. body>
    28.  
    29. html>

    focus伪类选择器也可以监听获得焦点事件，但我们需要更改元素内容，使用JS

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   <style>
    10.     input {
    11.       width: 200px;
    12.       transition: all .3s;
    13.     }
    14.  
    15.     /* focus伪类选择器  获得焦点 */
    16.     input:focus {
    17.       width: 300px;
    18.     }
    19.   style>
    20. head>
    21.  
    22. <body>
    23.   <input type="text">
    24. body>
    25.  
    26. html>

    三、事件对象

    3.1 获取事件对象

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   
    13.   <input type="text">
    14.   <script>
    15.     // const btn = document.querySelector('button')
    16.     // btn.addEventListener('click', function (e) {
    17.     //   console.log(e)
    18.     // })
    19.  
    20.     const input = document.querySelector('input')
    21.     input.addEventListener('keyup', function (e) {
    22.       // console.log(11)
    23.       // console.log(e.key)
    24.       if (e.key === 'Enter') {
    25.         console.log('我按下了回车键')
    26.       }
    27.     })
    28.   script>
    29. body>
    30.  
    31. html>

    点击按钮后控制台打印对象：

    3.2 事件对象常用属性

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   
    13.   <input type="text">
    14.   <script>
    15.     // const btn = document.querySelector('button')
    16.     // btn.addEventListener('click', function (e) {
    17.     //   console.log(e)
    18.     // })
    19.  
    20.     const input = document.querySelector('input')
    21.     input.addEventListener('keyup', function (e) {
    22.       // console.log(11)
    23.       // console.log(e.key)
    24.       if (e.key === 'Enter') {
    25.         console.log('我按下了回车键')
    26.       }
    27.     })
    28.   script>
    29. body>
    30.  
    31. html>

    去字符串左右空格：trim()

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <textarea name="" id="" cols="30" rows="10">textarea>
    13.   <script>
    14.     const str = '          im a teacher  '
    15.     // console.log(str.trim())  // 去除字符串左右的空格
    16.     const tx = document.querySelector('textarea')
    17.     tx.addEventListener('keyup', function (e) {
    18.       // console.log(tx.value)
    19.       if (e.key === 'Enter') {
    20.         // console.log(tx.value)
    21.         console.log(tx.value.trim() === '')
    22.       }
    23.     })
    24.   script>
    25. body>
    26.  
    27. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>评论回车发布title>
    9.   <style>
    10.     .wrapper {
    11.       min-width: 400px;
    12.       max-width: 800px;
    13.       display: flex;
    14.       justify-content: flex-end;
    15.     }
    16.  
    17.     .avatar {
    18.       width: 48px;
    19.       height: 48px;
    20.       border-radius: 50%;
    21.       overflow: hidden;
    22.       background: url(./images/avatar.jpg) no-repeat center / cover;
    23.       margin-right: 20px;
    24.     }
    25.  
    26.     .wrapper textarea {
    27.       outline: none;
    28.       border-color: transparent;
    29.       resize: none;
    30.       background: #f5f5f5;
    31.       border-radius: 4px;
    32.       flex: 1;
    33.       padding: 10px;
    34.       transition: all 0.5s;
    35.       height: 30px;
    36.     }
    37.  
    38.     .wrapper textarea:focus {
    39.       border-color: #e4e4e4;
    40.       background: #fff;
    41.       height: 50px;
    42.     }
    43.  
    44.     .wrapper button {
    45.       background: #00aeec;
    46.       color: #fff;
    47.       border: none;
    48.       border-radius: 4px;
    49.       margin-left: 10px;
    50.       width: 70px;
    51.       cursor: pointer;
    52.     }
    53.  
    54.     .wrapper .total {
    55.       margin-right: 80px;
    56.       color: #999;
    57.       margin-top: 5px;
    58.       opacity: 0;
    59.       transition: all 0.5s;
    60.     }
    61.  
    62.     .list {
    63.       min-width: 400px;
    64.       max-width: 800px;
    65.       display: flex;
    66.     }
    67.  
    68.     .list .item {
    69.       width: 100%;
    70.       display: flex;
    71.     }
    72.  
    73.     .list .item .info {
    74.       flex: 1;
    75.       border-bottom: 1px dashed #e4e4e4;
    76.       padding-bottom: 10px;
    77.     }
    78.  
    79.     .list .item p {
    80.       margin: 0;
    81.     }
    82.  
    83.     .list .item .name {
    84.       color: #FB7299;
    85.       font-size: 14px;
    86.       font-weight: bold;
    87.     }
    88.  
    89.     .list .item .text {
    90.       color: #333;
    91.       padding: 10px 0;
    92.     }
    93.  
    94.     .list .item .time {
    95.       color: #999;
    96.       font-size: 12px;
    97.     }
    98.   style>
    99. head>
    100.  
    101. <body>
    102.   <div class="wrapper">
    103.     <i class="avatar">i>
    104.     <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200">textarea>
    105.     <button>发布button>
    106.   div>
    107.   <div class="wrapper">
    108.     <span class="total">0/200字span>
    109.   div>
    110.   <div class="list">
    111.     <div class="item" style="display: none;">
    112.       <i class="avatar">i>
    113.       <div class="info">
    114.         <p class="name">清风徐来p>
    115.         <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]p>
    116.         <p class="time">2022-10-10 20:29:21p>
    117.       div>
    118.     div>
    119.   div>
    120.   <script>
    121.     const tx = document.querySelector('#tx')
    122.     const total = document.querySelector('.total')
    123.     const item = document.querySelector('.item')
    124.     const text = document.querySelector('.text')
    125.     // 1. 当我们文本域获得了焦点，就让 total 显示出来
    126.     tx.addEventListener('focus', function () {
    127.       total.style.opacity = 1
    128.     })
    129.     // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    130.     tx.addEventListener('blur', function () {
    131.       total.style.opacity = 0
    132.     })
    133.     // 3. 检测用户输入
    134.     tx.addEventListener('input', function () {
    135.       // console.log(tx.value.length)  得到输入的长度
    136.       total.innerHTML = `${tx.value.length}/200字`
    137.     })
    138.  
    139.     // 4. 按下回车发布评论
    140.     tx.addEventListener('keyup', function (e) {
    141.       // 只有按下的是回车键，才会触发
    142.       // console.log(e.key)
    143.       if (e.key === 'Enter') {
    144.         // 如果用户输入的不为空就显示和打印
    145.         if (tx.value.trim()) {
    146.           // console.log(11)
    147.           item.style.display = 'block'
    148.           // console.log(tx.value)  // 用户输入的内容
    149.           text.innerHTML = tx.value
    150.  
    151.         }
    152.         // 等我们按下回车，结束，清空文本域
    153.         tx.value = ''
    154.         // 按下回车之后，就要把 字符统计 复原
    155.         total.innerHTML = '0/200字'
    156.       }
    157.  
    158.     })
    159.   script>
    160. body>
    161.  
    162. html>

    四、 环境对象

    五、 回调函数

    为什么不使用hover，而要使用鼠标经过事件？

    鼠标离开后，元素仍处于active状态

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>tab栏切换title>
    9.   <style>
    10.     * {
    11.       margin: 0;
    12.       padding: 0;
    13.     }
    14.  
    15.     .tab {
    16.       width: 590px;
    17.       height: 340px;
    18.       margin: 20px;
    19.       border: 1px solid #e4e4e4;
    20.     }
    21.  
    22.     .tab-nav {
    23.       width: 100%;
    24.       height: 60px;
    25.       line-height: 60px;
    26.       display: flex;
    27.       justify-content: space-between;
    28.     }
    29.  
    30.     .tab-nav h3 {
    31.       font-size: 24px;
    32.       font-weight: normal;
    33.       margin-left: 20px;
    34.     }
    35.  
    36.     .tab-nav ul {
    37.       list-style: none;
    38.       display: flex;
    39.       justify-content: flex-end;
    40.     }
    41.  
    42.     .tab-nav ul li {
    43.       margin: 0 20px;
    44.       font-size: 14px;
    45.     }
    46.  
    47.     .tab-nav ul li a {
    48.       text-decoration: none;
    49.       border-bottom: 2px solid transparent;
    50.       color: #333;
    51.     }
    52.  
    53.     .tab-nav ul li a.active {
    54.       border-color: #e1251b;
    55.       color: #e1251b;
    56.     }
    57.  
    58.     .tab-content {
    59.       padding: 0 16px;
    60.     }
    61.  
    62.     .tab-content .item {
    63.       display: none;
    64.     }
    65.  
    66.     .tab-content .item.active {
    67.       display: block;
    68.     }
    69.   style>
    70. head>
    71.  
    72. <body>
    73.   <div class="tab">
    74.     <div class="tab-nav">
    75.       <h3>每日特价h3>
    76.       <ul>
    77.         <li><a class="active" href="javascript:;">精选a>li>
    78.         <li><a href="javascript:;">美食a>li>
    79.         <li><a href="javascript:;">百货a>li>
    80.         <li><a href="javascript:;">个护a>li>
    81.         <li><a href="javascript:;">预告a>li>
    82.       ul>
    83.     div>
    84.     <div class="tab-content">
    85.       <div class="item active"><img src="./images/tab00.png" alt="" />div>
    86.       <div class="item"><img src="./images/tab01.png" alt="" />div>
    87.       <div class="item"><img src="./images/tab02.png" alt="" />div>
    88.       <div class="item"><img src="./images/tab03.png" alt="" />div>
    89.       <div class="item"><img src="./images/tab04.png" alt="" />div>
    90.     div>
    91.   div>
    92.   <script>
    93.     // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    94.     // 1.1 获取 a 元素 
    95.     const as = document.querySelectorAll('.tab-nav a')
    96.     // console.log(as) 
    97.     for (let i = 0; i < as.length; i++) {
    98.       // console.log(as[i])
    99.       // 要给 5个链接绑定鼠标经过事件
    100.       as[i].addEventListener('mouseenter', function () {
    101.         // console.log('鼠标经过')
    102.         // 排他思想  
    103.         // 干掉别人 移除类active
    104.         document.querySelector('.tab-nav .active').classList.remove('active')
    105.         // 我登基 我添加类 active  this 当前的那个 a 
    106.         this.classList.add('active')
    107.  
    108.         // 下面5个大盒子 一一对应  .item 
    109.         // 干掉别人
    110.         document.querySelector('.tab-content .active').classList.remove('active')
    111.         // 对应序号的那个 item 显示 添加 active 类
    112.         document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
    113.  
    114.       })
    115.     }
    116.   script>
    117. body>
    118.  
    119. html>

  • 相关阅读:
    SpringBoot 过滤器和拦截器的区别
    @pytest.mark.dependency依赖跨模块时，当前测试方法自动被跳过
    算法——滑动窗口
    C盘清理教程
    编程语言新特性：instanceof的改进
    【车辆配送】基于模拟退火 (SA)求解车辆配送 （VPR） (Matlab代码实现）
    LeetCode 42. 接雨水
    天文信号处理 Lightkurve 安装教程 报错处理
    c++模板小例子
    【C++学习第六讲】第一章练习题（含源代码）
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133318112