单页面路由样例 

<!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;
            width: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>
posted @ 2019-03-12 14:41  刘浩2561179983  阅读(338)  评论(0)  编辑  收藏  举报