老师麻烦帮我看下为什么点击第二个导航的时候图片都不显示了
来源：3-5 编程练习
TeresaL
2019-03-29 15:45:51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="main">
<!--头部-->
<div class="header">
<nav>pwa</nav>
<nav>node</nav>
<nav>vue</nav>
<nav>小程序</nav>
</div>
<!--图片区域-->
<div class="content">
<img class="img1" src="img/1.jpg">
<img class="img2" src="img/3.jpg">
<img class="img3" src="img/4.jpg">
<img class="img4" src="img/5.jpg">
</div>
</div>
</body>
</html>
css：
*{
padding: 0;
margin: 0;
border: none;
}
.main{
width:1000px;
height:600px;
margin: 0 auto;
overflow: hidden;
}
.header{
width:1000px;
height: 100px;
}
nav{
width:25%;
height: 100px;
line-height: 100px;
float: left;
background-color: #000;
text-align: center;
color:#fff;
font-weight: bold;
cursor:pointer;
}
nav:hover{
background-color: #ddd;
color:#000;
}
.content img{
width:1000px;
height:500px;
}
.content{
position: relative;
}
.img1{
opacity: 1;
}
.img{
position: absolute;
top:0;
left: 0;
opacity: 0;
}
jq:
$(document).ready(function(){
$('nav').click(function(){
$('img')
.eq($(this).index())
.css({'opacity':'1'})
.siblings().css({'opacity':'0'});
})
})
1回答
-
你好同学 ， 因为图片都是引入后 ，从上往下排列的 。并且大盒子 overflow: hidden; ， overflow: hidden;设置超出隐藏 ， 所以只有第一个能够显示 ，其他的超出了大盒子隐藏了哦
这里是代码中给img标签前面加了一个点导致定位没有出来 ，图片无法叠加
去掉点即可：
祝学习愉快 ，望采纳。
0
相似问题