注册事件
<body>
<button class="btn">按钮</button>
<script>
//需求:当用户单击这个按钮时 将这个按钮里面的文字修改为 做核酸
//1.获取按钮dom对象
//2.给dom对象注册事件 鼠标单击
//3. 按钮里面的文字修改为 做核酸
//函数一定是 被调用菜户执行 当事件触发的时候 匿名函数就会被执行
// const btn=document.querySelector('.btn')
// btn.addEventListener('click',function() {
// btn.innerHTML='做核酸'
// })
const btn=document.querySelector('.btn')
btn.addEventListener('click',function() {
btn.innerHTML='做核酸'
})
</script>
</body>
顶部关闭
<style>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.close {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
我是广告
<div class="close">X</div>
</div>
<script>
//1.给class='close'dom元素注册 点击事件
document.querySelector('.close').addEventListener('click', function() {
// alert('1')
document.querySelector('.box').style.display = 'none'
})
</script>
</body>
随机点名案例
<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 {
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 src="./public.js/publis.js"></script>
<script>
// 数据数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
let id //全局变量 在这个script标签中都可以被访问
let i
//1.获取到start 按钮注册点击事件
const start = document.querySelector('.start')
const qs = document.querySelector('.qs')
start.addEventListener('click', function () {
//开启定时器
id = setInterval(function () {
//调用函数
i = getRandom(0, arr.length - 1)
//从数组中去除对应的数组元素
qs.innerHTML = arr[i]
}, 30)
//判断 这个数组的长度是否等于1 将开始按钮与结束按钮设置为禁用按钮
/* if(arr.length===1){
start.disabled=true
end.disabled=true
} */
if (arr.length === 1) start.disabled = end.disabled = true
})
//2 点击结束按钮 停止定时器
//2.1 获取到 class=end的按钮 注册点击事件
const end = document.querySelector('.end')
end.addEventListener('click', function () {
clearInterval(id)
//删除被选中的这个元素
arr.splice(i, 1)
})
</script>
</body>
注册事件
<body>
<button class="btn">按钮</button>
<script>
//1.获取class=btn 这个dom对象
const btn=document.querySelector('.btn')
//2.注册事件
/* btn.onclick=function(){
console.log(1)
}
btn.onclick=function(){
console.log(1)
} */
btn.addEventListener('click', function(){
console.log(3)
})
btn.addEventListener('click', function(){
console.log(4)
})
</script>
鼠标事件
<style>
.box{
width: 100px;
height: 100px;
background:blue;
}
</style>
</head>
<body>
<button>按钮</button>
<hr>
<div class="box"></div>
<script>
const button=document.querySelector('button')
button.addEventListener('dblclick',function(){
console.log(1)
})
//鼠标经过时 让box盒子的背景颜色 变成hotpink
//鼠标离开时 让box的背景颜色编程pink
/* const box=document.querySelector('.box')
box.addEventListener('mouseover',function(){
box.style.background='#f00'
})
box.addEventListener('mouseleave',function(){
box.style.background='pink'
}) */
const box=document.querySelector('.box')
box.addEventListener('mouseover',function(){
box.style.background='#f00'
})
/* box.addEventListener('mouseleave',function(){
box.style.background='pink'
}) */
</script>
轮播图按钮
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./06-素材/images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const sliderData = [{
url: './06-素材/images/slider01.jpg',
title: '对人类来说会不会太超前了？',
color: 'rgb(100, 67, 68)'
},
{
url: './06-素材/images/slider02.jpg',
title: '开启剑与雪的黑暗传说！',
color: 'rgb(43, 35, 26)'
},
{
url: './06-素材/images/slider03.jpg',
title: '真正的jo厨出现了！',
color: 'rgb(36, 31, 33)'
},
{
url: './06-素材/images/slider04.jpg',
title: '李玉刚：让世界通过B站看到东方大国文化',
color: 'rgb(139, 98, 66)'
},
{
url: './06-素材/images/slider05.jpg',
title: '快来分享你的寒假日常吧~',
color: 'rgb(67, 90, 92)'
},
{
url: './06-素材/images/slider06.jpg',
title: '哔哩哔哩小年YEAH',
color: 'rgb(166, 131, 143)'
},
{
url: './06-素材/images/slider07.jpg',
title: '一站式解决你的电脑配置问题！！！',
color: 'rgb(53, 29, 25)'
},
{
url: './06-素材/images/slider08.jpg',
title: '谁不想和小猫咪贴贴呢！',
color: 'rgb(99, 72, 114)'
},
]
//2.获取dom三个对象
const img = document.querySelector('.slider-wrapper img')
const footer = document.querySelector('.slider-footer')
const p = document.querySelector('.slider-footer p')
//3.获取到next dom对象
const next = document.querySelector('.toggle .next')
//3.1给next注册点击事件
let i = 0
next.addEventListener('click', function () {
console.log(1)
i++
if (i > sliderData.length - 1) {
i = 0
}
//通过i去数组中获取对应的数组元素
const obj = sliderData[i]
//更换img标签的src属性值
img.src = obj.url
//更换footer标签的src样式
footer.style.backgroundColor = obj.color
//更换p标签的内容
p.innerHTML = obj.title
//现将 有 active 的类名删除
document.querySelector('.slider-indicator li.active').classList.remove('active')
//然后给自己添加active的类名
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
})
const prev = document.querySelector('.toggle .prev')
//3.1给prev注册点击事件
prev.addEventListener('click', function () {
console.log(1)
i--
if (i < 0) {
i = sliderData.length - 1
}
//通过i去数组中获取对应的数组元素
const obj = sliderData[i]
//更换img标签的src属性值
img.src = obj.url
//更换footer标签的src样式
footer.style.backgroundColor = obj.color
//更换p标签的内容
p.innerHTML = obj.title
//现将 有 active 的类名删除
document.querySelector('.slider-indicator li.active').classList.remove('active')
//然后给自己添加active的类名
document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
})
//开启定时器 每隔一秒种 模拟点击右箭头按钮
/* setInterval(function() {
next.click()
},1000) */
/* setInterval(function() {
next.click()
},1000) */
let timerId = setInterval(function() {
next.click()
},1000)
//鼠标经过大盒子的时候 我们需要停止定时器
/* const slider=document.querySelector('.slider')
slider.addEventListener('mouseenter', function(){
clearInterval(timerId)
}) */
//鼠标离开大盒子的时候 我们需要开启定时器
/* slider.addEventListener('mouseleave', function(){
clearInterval(timerId)
timerId = setInterval(function() {
next.click()
},1000)
}) */
const slider=document.querySelector('.slider')
slider.addEventListener('mouseenter',function(){
clearInterval(timerId)
})
slider.addEventListener('mouseleave',function(){
clearInterval(timerId)
timerId = setInterval(function() {
next.click()
},1000)
})
</script>
</body>
全选功能
<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>
//上面的全选框 打上勾 下面的3个复选框 也要打上勾 反之 上面的全选框没有打上勾 则下面3个复选框 也不要打上勾
//1.获取上面的全选框 还有下面的三个复选框
/* const checkAll=document.querySelector('#checkAll')
const ck=document.querySelectorAll('.ck') */
//2.给上面的全选框注册点击事件
/* checkAll.addEventListener('click',function(){
for(let i=0;i<ck.length;i++){
ck[i].checked =checkAll.checked
}
}) */
/* checkAll.addEventListener('click',function(){
for(let i=0;i<ck.length;i++){
ck[i].checked =checkAll.checked
}
}) */
/* checkAll.addEventListener('click',function(){
for(let i=0;i<ck.length;i++){
ck[i].checked =checkAll.checked
}
}) */
/* const checkAll = document.querySelector('#checkAll')
const ck = document.querySelectorAll('.ck')
checkAll.addEventListener('click', function () {
for (let i = 0; i < ck.length; i++) {
ck[i].checked = checkAll.checked
}
}) */
const checkAll = document.querySelector('#checkAll')
const ck = document.querySelectorAll('.ck')
checkAll.addEventListener('click', function () {
for (let i = 0; i < ck.length; i++) {
ck[i].checked = checkAll.checked
}
})
//用户点击下面的复选框 下面的复选框全部都打上勾 上面的全选框也跟着一起打钩 如果下面的复选框有一个没有打钩则全选框不打钩
//1.给下面的3个复选框 注册点击事件
//2.看看下面复选框
for (let i = 0; i < ck.length; i++) {
ck[i].addEventListener('click', function () {
//借助于css的选择器:checked
// 找到所有class=ck的元素 同时还需要打上勾
/* if(document.querySelectorAll('.ck:checked').length===ck.length){
checkAll.checked=true
}else{
checkAll.checked=false
} */
/* checkAll.checked=document.querySelectorAll('.ck:checked').length===ck.length */
/* checkAll.checked = document.querySelectorAll('.ck:checked'). length === ck.length */
/* checkAll.checked = document.querySelectorAll('.ck:checked').length===ck.length */
checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length
})
}
</script>
</body>
焦点事件
<body>
<input type="text">
<script>
//1.获取到input标签
const input = document.querySelector('input')
//2.input 标签注册focus事件
input.addEventListener('focus',function(){
console.log(1)
})
//3.input 标签注册blur事件
input.addEventListener('blur',function(){
console.log(2)
})
</script>
</body>
小米搜索框
<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;
}
.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" style="display:none">
<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 的标签注册 获取焦点事件 给自己加一个类名 search 同时 让ul隐藏出来
//2.需要给input 的标签注册 市区焦点事件 移除 search 同时隐藏出来
/* const input=document.querySelector('input')
const ul=document.querySelector('.result-list')
input.addEventListener('focus',function(){
input.classList.add('search')
ul.style.display = 'block'
})
input.addEventListener('blur',function(){
input.classList.remove('search')
ul.style.display = 'none'
}) */
const input=document.querySelector('input')
const ul=document.querySelector('.result-list')
input.addEventListener('focus',function(){
input.classList.add('search')
ul.style.display = 'block'
})
input.addEventListener('blur',function(){
input.classList.remove('search')
ul.style.display = 'none'
})
</script>
</body>
键盘抬起事件
<body>
<input type="text">
<script>
//1.获取元素
const input=document.querySelector('input')
//2.添加事件 keydown 键盘按下
input.addEventListener('keydown',function(){
console.log(1)
})
input.addEventListener('keyup',function(){
console.log(2)
})
</script>
</body>
评论数字统计
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./06-素材/images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">清风徐来</p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
//1.获取id=tx的dom元素 class=total 的dom元素
const tx=document.querySelector('#tx')
const total=document.querySelector('.wrapper .total')
//2.给tx dom对象注册 获取 焦点事件
tx.addEventListener('focus',function(){
total.style.opacity=1
})
//3.给tx dom对象注册 失去 焦点事件
tx.addEventListener('blur',function(){
total.style.opacity=0
})
//4.给 tx dom 注册 失去焦点事件
tx.addEventListener('input',function(){
total.innerHTML=`${tx.value.length}/200字`
})
</script>
</body>
事件对象
<script>
//事件对象:时间在发生有一些数据是保存到一个对象里面在
//比如:鼠标点击的坐标 键盘按下的那个按键
//给整个文档注册点击事件
document.addEventListener('click',function(e){
// console.log(e.clientX,e.clientY)
console.log(e.key)
})
//client 坐标轴
//type 获取当前的事件类型
//clientX/clientY 获取光标相对已浏览器可见窗口左上角的位置
//offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
//key 用户按下的键盘的值
// 现在不提倡使用keyCode
</script>
回车发表评论
<style>
.wrapper {
min-width: 400px;
max-width: 800px;
display: flex;
justify-content: flex-end;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: url(./06-素材/images/avatar.jpg) no-repeat center / cover;
margin-right: 20px;
}
.wrapper textarea {
outline: none;
border-color: transparent;
resize: none;
background: #f5f5f5;
border-radius: 4px;
flex: 1;
padding: 10px;
transition: all 0.5s;
height: 30px;
}
.wrapper textarea:focus {
border-color: #e4e4e4;
background: #fff;
height: 50px;
}
.wrapper button {
background: #00aeec;
color: #fff;
border: none;
border-radius: 4px;
margin-left: 10px;
width: 70px;
cursor: pointer;
}
.wrapper .total {
margin-right: 80px;
color: #999;
margin-top: 5px;
opacity: 0;
transition: all 0.5s;
}
.list {
min-width: 400px;
max-width: 800px;
display: flex;
}
.list .item {
width: 100%;
display: flex;
}
.list .item .info {
flex: 1;
border-bottom: 1px dashed #e4e4e4;
padding-bottom: 10px;
}
.list .item p {
margin: 0;
}
.list .item .name {
color: #FB7299;
font-size: 14px;
font-weight: bold;
}
.list .item .text {
color: #333;
padding: 10px 0;
}
.list .item .time {
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrapper">
<i class="avatar"></i>
<textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
<button>发布</button>
</div>
<div class="wrapper">
<span class="total">0/200字</span>
</div>
<div class="list">
<div class="item" style="display: none;">
<i class="avatar"></i>
<div class="info">
<p class="name">清风徐来</p>
<p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
<p class="time">2022-10-10 20:29:21</p>
</div>
</div>
</div>
<script>
//1.获取id=tx的dom元素 class=total 的dom元素
const tx=document.querySelector('#tx')
const total=document.querySelector('.wrapper .total')
//2.给tx dom对象注册 获取 焦点事件
tx.addEventListener('focus',function(){
total.style.opacity=1
})
//3.给tx dom对象注册 失去 焦点事件
tx.addEventListener('blur',function(){
total.style.opacity=0
})
//4.给 tx dom 注册 失去焦点事件
tx.addEventListener('input',function(){
total.innerHTML=`${tx.value.length}/200字`
})
//5.当用户点击发布按钮时 需要获取到tx dom 元素里面的内容
const button=document.querySelector('button')
//
const item=document.querySelector('.list .item')
const p=document.querySelector('.list .text')
button.addEventListener('click',function(){
//获取tx dom 对象里面的内容
//trim() 去掉字符串左右的空格
const val=tx.value.trim()
//判断 如果字符串的长度为0 则提示用户
//在函数里面 return 关键字有两层含义 1.返回数据给函数的调用者 2.中断函数往下执行
if(val.length===0) return alert('请输入内容')
//用户输入内容
//让item 的盒子显示出现
item.style.display="block"
//让p 标签里面的内容变成用户输入的内容
p.innerHTML=val
//让输入框清空
tx.value=''
})
//用户按下回车键的时候也能发表评论
//1.给文本域注册键盘按下的事件
//2.判断是否按下的回车键
//3.按下回车键等同于点击发表按钮
/* tx.addEventListener('keydown',function(e){
if(e.key==='Enter') button.click()
}) */
/* tx.addEventListener('keydown',function(e){
if(e.key==='Enter'){
button.click()
}
}) */
/* tx.addEventListener('keydown',function(e){
if(e.key==='Enter'){
button.click()
}
}) */
tx.addEventListener('keydown',function(e){
if(e.key==='Enter'){
button.click()
}
})
</script>
</body>
环境对象
<body>
<button>按钮</button>
<script>
const button = document.querySelector('button')
document.querySelector('button').addEventListener('click', function () {
// 在函数里面有一个 this 的关键字 他是一个对象
// 谁调用这个函数 函数里面的 this 就代表谁
console.log(this)
// button.innerHTML = 'aaa'
this.innerHTML = '狗子'
})
// 我们之前在js基础学习的函数与变量
// 其实它本质时 window 对象的属性与方法
function fn() {
console.log(this)
}
fu()
</script>
this到底是谁
<body>
<button id="btn">按钮</button>
<script>
const button=document.querySelector('#btn')
function fn(){
//this 他是一个对象
//谁在调用这个函数 他就是谁
console.log(this)
}
fn()
btn.addEventListener('click',fn)
</script>
</body>
回调函数
<body>
<script>
//将一个函数作为参数 传递给另外一个函数 那么这个函数就称之为回调函数
function B(){
f()
}
B(function A(){
console.log(1)
})
</script>
</body>
tab栏切换
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a class="active" href="javascript:;">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">个护</a></li>
<li><a href="javascript:;">预告</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="./06-素材/images/tab00.png" alt="" /></div>
<div class="item"><img src="./06-素材/images/tab01.png" alt="" /></div>
<div class="item"><img src="./06-素材/images/tab02.png" alt="" /></div>
<div class="item"><img src="./06-素材/images/tab03.png" alt="" /></div>
<div class="item"><img src="./06-素材/images/tab04.png" alt="" /></div>
</div>
</div>
<script>
// 1. 先给a标签注册鼠标经过事件
const a=document.querySelectorAll('.tab-nav a')
const div=document.querySelectorAll('.tab-content .item')
//a 是一个伪数组 遍历数组
for(let i=0;i<a.length;i++){
a[i].addEventListener('mouseenter',function(){
// 1.1 现将带有active 类名的 a 从他身上active类名去除
//1.2在给自己添加即可
document.querySelector('.tab-nav a.active').classList.remove('active')
this.classList.add('active')
//上面a的数量和下面div的数量一样 换句话说 下标是一样的
// 通过下标找到下面对应的哪一个div 给他添加active
document.querySelector('.tab-content .active').classList.remove('active')
document.querySelector(`.tab-content .item:nth-child(${i+1}`).classList.add('active')
/* document.querySelector('.tab-content div.active').classList.remove('active')
div[i].classList.add('active') */
})
}
</script>
</body>
