老师麻烦检查下

来源：3-5 编程练习

慕莱坞4298532

2019-02-03 22:23:40

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;
padding:0;}
.container{
width: 50vw;
margin:0 auto;
}
.conTitle{
width: 50vw;
overflow: hidden;
}
nav{
width:25%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
float:left;
color:white;
}
nav:hover{
background: gray;
color:black;
}
.content{
width: 50vw;
height: 400px;
overflow: hidden;
position: relative;
}
.content img{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
display: none;
}
.content .active{
display: block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$().ready(function(){
$("nav").click(function(){
$("img")
.eq($(this).index())//获取对象索引，导航项和图片的索引是相等的，
.addClass("active")//添加类样式
.siblings()//获取当前说索引以外的同级元素
.removeClass("active");//移除类样式
});
})
</script>
</head>
<body>
<div class="container">
<div class="conTitle">
<nav>pwa</nav>
<nav>node</nav>
<nav>vue</nav>
<nav>小程序</nav>
</div>
<div class="content">
<img class="img1 active" src="images/1.jpg"/>
<img class="img2" src="images/2.jpg"/>
<img class="img3" src="images/3.jpg"/>
<img class="img4" src="images/4.jpg"/>
</div>
</div>
</body>
</html>