外部.js
ファイルがありますが、それが原因かどうかわかりません.js
。
.js
ファイルは次のとおりです: ( /js/scripts.js
)
$(document).ready(function (){
$('#about_link').click( function() {
$('.middleface img').css('display','none');
$('.aboutface').css('display','');
});
});
私は 3 つのリンク ( index
、about
、contact
) をそれぞれ#index_link
、#about_link
&で持ってい#contact_link
ます。
私がやろうとしているのは、[About]<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;
}