老师，请检查

来源：3-5 编程练习

广东靓仔

2019-06-29 11:18:10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<nav>
<a href="#">强化</a>
<a href="#">携手</a>
<a href="#">贯穿</a>
<a href="#">体验</a>
</nav>
<div>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
</body>
</html>

*{
margin:0;
padding:0;
}
nav{
width:1200px;
height:40px;
margin:30px auto 0;
display:flex;
justify-content:"space-between";
background-color:#333333;
border-radius:5px;
}
nav a{
width:25%;
height:40px;
line-height:40px;
text-align:center;
text-decoration:none;
font-size:22px;
color:#fff;
}
div{
width:1200px;
height:460px;
display:flex;
justify-content:space-between;
margin:0 auto;
overflow:hidden;
}
div img{
width:100%;
height:100%;
}

$(document).ready(function(){
$('a').click(function(){
$('img').eq($(this).index()).css({'opacity':'1','background':'#bbb','color':'#333333'}).siblings().css({'opacity':'0'});
});
});

写回答

1回答