css
html
js
说明:其实这个跟fullpage是类似的,他实现的是滚动,我写的是点击滚动起来.
代码粘贴上:
<!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>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
body,
html {
overflow: hidden;
height: 100%;
padding: 0;
margin: 0;
}
.box {
height: 100%;
}
.aa {
background-color: rgb(27, 188, 155);
}
.bb {
background-color: rgb(75, 191, 195);
}
.cc {
background-color: rgb(123, 170, 190);
}
.dd {
background-color: rgb(255, 153, 0);
}
.heights span {
font-size: 20px;
color: #fff;
text-align: center;
display: inline-block;
width: 100%;
}
</style>
<script>
$(function () {
$(".heights").height($(document).height());
$(".heights").last().addClass("on");
$(document).on('click', '.heights span', function () {
$(this).parents(".heights").addClass("on");
$(this).parents(".heights").hide();
$(this).parents(".heights").next(".heights").show();
$(".heightss").show();
});
$(document).on('click', '.box .on', function () {
$(this).hide();
$(this).prev(".heights").show();
$(this).removeClass("on");
$(".heightss").addClass("on");
});
})
</script>
</head>
<body>
<div class="box">
<div class="heights aa">
<span>我是按钮1</span>
</div>
<div class="heights bb">
<span>我是按钮2</span>
</div>
<div class="heights cc">
<span>我是按钮3</span>
</div>
<div class="heights heightss dd">
<span class="">我是按钮4</span>
</div>
</div>
</body>
</html>
