<!DOCTYPE html>
<html lang="ch-zn">
<head>
<meta charset="UTF-8">
<title>moban</title>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
#wrap{
1080px;
height: 350px;
margin: 50px auto;
}
#wrap .nav{
position: relative;
100%;
height: 40px;
background-color: #f5f5f5;
line-height: 40px;
font-size: 14px;
}
#wrap .nav p{
position: absolute;
top: 0;
left: 0;
130px;
height: 40px;
background-color: #000;
color: #fff;
text-align: center;
}
#wrap .nav ul{
box-sizing: border-box;
100%;
padding-left: 200px;
}
#wrap .nav ul li{
position: relative;
float: left;
margin-right: 32px;
cursor: pointer;
transition: color .3s;
}
#wrap .nav ul li:hover{
color: #db3a45;
}
#wrap .nav ul li::after{
position: absolute;
left: 0;
right: 0;
bottom: 0;
content: "";
0%;
height: 2px;
margin: auto;
background-color: #db3a45;
transition: width .3s;
}
#wrap .nav ul li.active::after{
100%;
}
#wrap .content{
100%;
height: 255px;
margin-top: 20px;
}
#wrap .content>ul{
position: relative;
100%;
height: 100%;
}
#wrap .content>ul li.first{
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
}
#wrap .content>ul li.first.show{
display: block;
}
#wrap .content>ul li.first ul{
150%;
}
#wrap .content>ul li.first ul li{
float: left;
340px;
height: 255px;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="nav">
<p class="title">独家精品策划</p>
<ul>
<li class="active">全部</li>
<li>列表一6666</li>
<li>列表二5254</li>
<li>列表三000</li>
<li>列表四333</li>
</ul>
</div>
<div class="content">
<ul>
<li class="first show">
<ul>
<li class="second"><img src="img/1.jpg" alt=""></li>
<li class="second"><img src="img/2.jpg" alt=""></li>
<li class="second"><img src="img/3.jpg" alt=""></li>
</ul>
</li>
<li class="first">
<ul>
<li class="second"><img src="img/4.jpg" alt=""></li>
<li class="second"><img src="img/5.jpg" alt=""></li>
<li class="second"><img src="img/6.jpg" alt=""></li>
</ul>
</li>
<li class="first">
<ul>
<li class="second"><img src="img/7.jpg" alt=""></li>
<li class="second"><img src="img/8.jpg" alt=""></li>
<li class="second"><img src="img/9.jpg" alt=""></li>
</ul>
</li>
<li class="first">
<ul>
<li class="second"><img src="img/10.jpg" alt=""></li>
<li class="second"><img src="img/11.jpg" alt=""></li>
<li class="second"><img src="img/12.jpg" alt=""></li>
</ul>
</li>
<li class="first">
<ul>
<li class="second"><img src="img/8.jpg" alt=""></li>
<li class="second"><img src="img/4.jpg" alt=""></li>
<li class="second"><img src="img/10.jpg" alt=""></li>
</ul>
</li>
</ul>
</div>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
//样式切换图
(function () {
//获取需要调整的变化样式对象权限
let Aactive = document.querySelectorAll(".nav ul li"),
Acontent = document.querySelectorAll(".content ul li.first"),
AactiveLen = Aactive.length;
for (let i = 0; i <AactiveLen ; i++) {
//li标题栏里的每项移入HTML变化
Aactive[i].onmouseenter = function (){
// console.log("移入了");
for (let j = 0; j <AactiveLen ; j++) {
//清除标签名字
Aactive[j].classList.remove("active");
Acontent[j].classList.remove("show");
};
//添加变化标签名字
this.classList.add("active");
Acontent[i].classList.add("show")
}
};
})();
</script>
</body>
<!--
笔记区域
-->
</html>
