<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hash{
height:300px;
background: red;
transform: translateX(100%);
position: fixed;
left:0;
top:0;
100%;
overflow-y: auto;
}
.hashActive{
animation: myfirst 1s;
z-index: 22;
transform: translateX(0%)
}
.hashOut{
animation: youfirst 1s;
z-index: 22;
transform: translateX(-100%)
}
@keyframes youfirst
{
from {transform: translateX(0%);}
to {transform: translateX(-100%);}
}
@keyframes myfirst
{
from {transform: translateX(100%);}
to {transform: translateX(0%);}
}
</style>
</head>
<body>
<div class="hash" section="login" style="background: gray">
登录
<button onclick="aa()">55555555</button>
</div>
<div class="hash" section="zhuce" style="background: pink">
注册
<button onclick="bb()">55555555</button>
</div>
<div class="hash" section="index" style="background: green">
首页
<button onclick="cc()">55555555</button>
</div>
<div class="hash" section="phone" style="background: yellow">
手机
<button onclick="dd()">55555555</button>dd
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
var json={
"login":"login",
"zhuce":"zhuce",
"index":"index",
"phone":"phone",
}
var jsonfn={
"login":(function(){
console.log(333333333333)
}),
"zhuce":(function(){
console.log(444444444444)
}),
"index":(function(){
console.log(5555555555)
}),
"phone":(function(){
console.log(66666666666)
}),
}
window.onload=function(){
console.log(window.location.hash)
if(!window.location.hash){
window.location.hash="login"
}else{
window.location.hash=window.location.hash.replace("#","")
}
}
function aa(){
window.location.hash="zhuce"
}
function bb(){
window.location.hash="index"
}
function cc(){
window.location.hash="phone"
}
function dd(){
window.location.hash="login"
}
function goHash(hash){
window.location.hash=hash
}
window.onhashchange=function(){
var hash=window.location.hash.replace("#","");
var component=json[hash]
jsonfn[hash].call(this)
$("[section="+window.oldHash+"]").removeClass("hashActive").addClass("hashOut")
$("[section="+component+"]").removeClass("hashOut").addClass("hashActive")
window.oldHash=window.location.hash.replace("#","")
}
</script>
</body>
</html>