<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.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;
}
ul{
list-style: none;
}
.products{
width: 1002px;
border:1px solid #ddd;
height:476px;
}
.products .main{
float: left;
display: none;
}
.products .main.select{
display: block;
}
img{
width: 800px;
height: 400px;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script>
$(function () {
$(".tab>.tab-item").mouseenter(function(){
$(this).addClass("active").siblings("li").removeClass("active");
var idx=$(this).index();
$(".products>.main").eq(idx).addClass("select").siblings("div").removeClass("select");
})
})
</script>
</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 select">
<a href="#"><img src="../../image/网页背景图%20(4).jpeg" alt=""></a>
</div>
<div class="main">
<a href="#"><img src="../../image/网页背景图%20(6).jpeg" alt=""></a>
</div>
<div class="main">
<a href="#"><img src="../../image/网页背景图%20(8).jpeg" alt=""></a>
</div>
<div class="main">
<a href="#"><img src="../../image/网页背景图%20(7).jpeg" alt=""></a>
</div>
</div>
</div>
</body>
</html>
哈哈,你们懂的,依旧没有图片。