谁能帮帮我!!!
所以我想制作 .button 一个按钮，将 #about_me div 移动到 0vh 但我没有真的懂jquery，我哪里做错了哈哈，请像婴儿一样解释:)
html
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$("div.about_me").toggleClass(".about_me_active");
});
});
</script>
</head>
<body>
<div id="background"><h1>Indiana Porter</h1><h2>Digital Artist</h2>
<div class="button">About Me</div>
<div class="about_me"></div>
</div>
</body>
</html>
和CSS
body{
margin:0;
padding:0;
font-family: Arvo;
color:white;
font-size:1.5vw;
}
@font-face {
font-family: Arvo;
src: url(Arvo-Regular.ttf);
}
@font-face {
font-family: Arvo-bold;
src: url(Arvo-Bold.ttf);
}
@font-face {
font-family: Arvo-italic;
src: url(Arvo-Italic.ttf);
}
@font-face {
font-family: Arvo-bold-italic;
src: url(Arvo-BoldItalic.ttf);
}
#background{
width:100vw;
height:100vh;
max-width:100%;
background:url("background.jpg");
background-attachment:fixed;
background-position:center;
background-origin:center;
background-size:cover;
position:absolute;
overflow:hidden;
}
#background h1{
margin:0;
padding:0;
position:relative;
top:15vh;
font-family:Arvo-bold;
font-size:8vw;
text-align:center;
text-shadow:0 0 2vw rgba(0,0,0,.5);
}
#background h2{
margin:0;
padding:0;
position:relative;
top:15vh;
font-family:Arvo-bold;
font-size:3vw;
text-align:center;
text-shadow:0 0 2vw rgba(0,0,0,.5);
}
.button{
text-align:center;
float:left;
font-size:1.5vw;
position:absolute;
width:8vw;
left:45vw;
top:80vh;
background:rgba(255,255,255,.3);
border-radius:.4vw;
padding:1vh 1vw;
cursor:pointer;
box-shadow:0 0 2vw black;
transition:.5s;
}
.button:hover{
box-shadow:0 0 2vw white;
}
.about_me{
width:100vw;
height:100vh;
max-width:100%;
background:url("about_me.jpg");
position:absolute;
top:100vh;
}
.about_me_active{
width:100vw;
height:100vh;
max-width:100%;
background:url("about_me.jpg");
position:absolute;
top:0vh;
}
最佳答案
切换类不需要类名前的句点
$(document).ready(function(){
$(".button").click(function(){
$(".about_me").toggleClass("about_me_active");
});
});.about_me{
width:100vw;
height:100vh;
max-width:100%;
background-color:red;
position:absolute;
top:100vh;
}
.about_me_active{
width:100vw;
height:100vh;
max-width:100%;
background-color:black;
position:absolute;
top:0vh;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"><h1>Indiana Porter</h1><h2>Digital Artist</h2>
<div class="button">About Me</div>
<div class="about_me"></div>关于jquery 切换 div 位置的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26805503/