为什么还是没有效果
来源：3-4 行为层
lhebe
2019-03-05 11:24:32
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="练习.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jq练习.js"></script>
</head>
<body>
<nav>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
</nav>
<div>
<img src="../img1/bg1.jpg">
<img src="../img1/bg2.jpg">
<img src="../img1/bg3.jpg">
<img src="../img1/bg1.jpg">
<img src="../img1/bg3.jpg">
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
body{
background: palegoldenrod;
}
nav{
width:78.125vw;
margin:20px auto 10px;
position: relative;
display: flex;
justify-content: space-between;
}
nav:before{
display: block;
width:100%;
height:20px;
position: absolute;
background: #ffffff;
top:20px;
content: '';
}
nav > a{
position: relative;
display: block;
text-decoration: none;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
border: 2px solid paleturquoise;
background: #255d7e;
color: #ffffff;
}
div{
position: relative;
width:78.125vw;
height:75vh;
overflow: hidden;
margin: 10px auto;
background: #ffffff;
}
div > img{
height:96%;
width: 98%;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
/**
* Created by heber on 2019/3/5.
*/
$(document).ready(function(){
$('a').click(function(){
$('img').eq($(this).index())
.css({'opacity':'1'})
.siblings()
.css({'opacity':'0'});
});
});
1回答
-
Steve007
2019-03-05
同学，你好。效果是可以实现的，建议同学可以检查一下路径的问题，或者是将js的文件名写成纯英文试试， 写在一起是可以实现的，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="练习.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jq练习.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
background: palegoldenrod;
}
nav{
width:78.125vw;
margin:20px auto 10px;
position: relative;
display: flex;
justify-content: space-between;
}
nav:before{
display: block;
width:100%;
height:20px;
position: absolute;
background: #ffffff;
top:20px;
content: '';
}
nav > a{
position: relative;
display: block;
text-decoration: none;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
border: 2px solid paleturquoise;
background: #255d7e;
color: #ffffff;
}
div{
position: relative;
width:78.125vw;
height:75vh;
overflow: hidden;
margin: 10px auto;
background: #ffffff;
}
div > img{
height:96%;
width: 98%;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<nav>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
<a href="javascript:;">dfdf</a>
</nav>
<div>
<img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg">
<img src="http://pic.58pic.com/58pic/15/68/59/71X58PICNjx_1024.jpg">
<img src="http://img.bimg.126.net/photo/31kQlCGP44-34Q5yxvoqmw==/5770237022569104952.jpg">
<img src="http://d.hiphotos.baidu.com/lvpics/w=1000/sign=e2347e78217f9e2f703519082f00eb24/730e0cf3d7ca7bcb49f90bb1b8096b63f724a8aa.jpg">
<img src="http://pic9.nipic.com/20100824/2531170_082435310724_2.jpg">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
/**
* Created by heber on 2019/3/5.
*/
$(document).ready(function(){
$('a').click(function(){
$('img').eq($(this).index())
.css({'opacity':'1'})
.siblings()
.css({'opacity':'0'});
});
});
</script>
</body>
</html>
祝学习愉快！
0h019-03-05
相似问题