1.CSS样式
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
margin-left: 300px;
}
.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;
}
.tab-content img{
width: 100%;
height: 580px;
/* width: 100%; */
/* height: 100%; */
}
</style>
2.Html+JavaScript
<div class="tab">
<div class="tab-nav">
<h3>惜君</h3>
<ul>
<li><a class="active" href="javascript:;">精选1</a></li>
<li><a href="javascript:;">精选2</a></li>
<li><a href="javascript:;">精选3</a></li>
<li><a href="javascript:;">精选4</a></li>
<li><a href="javascript:;">精选5</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="./images/6.png" alt="" /></div>
<div class="item"><img src="./images/11.webp" alt="" /></div>
<div class="item"><img src="./images/3.png" alt="" /></div>
<div class="item"><img src="./images/4.jpg" alt="" /></div>
<div class="item"><img src="./images/10.jpg" alt="" /></div>
</div>
<script>
//1.a模块制作 要给5个链表绑定鼠标经过事件
//1.1 获取a元素
const as = document.querySelectorAll('.tab-nav a')
// console.log(as)
for(let i = 0;i<as.length ;i++){
// console.log(as[i]);
as[i].addEventListener('mouseenter',function(){
console.log('鼠标经过');
//移除active
document.querySelector('.tab-nav .active').classList.remove('active')
//添加类 active
this.classList.add('active')
//下面5个大盒子 一一对应 .item
//移除
document.querySelector('.tab-content .active').classList.remove('active')
//对应序号的那个item 显示添加 active类
document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
})
}
</script>
</div>