我有一个外部.js文件，我不确定它是否是 .js错误。
这是 .js文件:(/js/scripts.js)
$(document).ready(function (){
$('#about_link').click( function() {
$('.middleface img').css('display','none');
$('.aboutface').css('display','');
});
});
我有三个链接( index 、 about 、 contact )，每个链接都有 #index_link , #about_link & #contact_link分别。
我想做的是点击关于<a>链接，里面的图片.middleface div应该消失，并且 .aboutface div应该会出现。
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!-- navigation -->
<div class="navbar">
<div class="navlinks">
<a type="button" id="index_link">Index</a>
<a type="button" id="about_link">About</a>
<a type="button" id="contact_link">Contact</a>
</div>
</div>
<!-- middlecontent -->
<div class="middleface">
<img id="middle_image" src="images/blabla2.png" alt="blabla">
<!-- aboutpage -->
<div class="aboutface"></div>
</div>
</div>
</body>
</html>
...和 CSS
.middleface {
background-image:url('images/blabla1.jpg');
background-size:cover;
width:100%;
}
#middle_image {
height: 230px;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
.middleface img{}
.aboutface {
display:none;
margin-left:auto;
margin-right:auto;
background-color:grey;
width:800px;
height:280px;
}
最佳答案
尝试:
$(document).ready(function (){
$('#about_link').click( function() {
$('.middleface img').css('display','none');
$('.aboutface').css('display','block');
});
});
您还可以使用隐藏和显示:
$(document).ready(function (){
$('#about_link').click( function() {
$('.middleface img').hide();
$('.aboutface').show();
});
});
关于jquery - 简单的 Jquery 事件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16933090/