JS实现路由跳转

来源：互联网发布：装配式建筑缺点知乎编辑：程序博客网时间：2024/05/16 00:44
之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。
示例图：
源码：
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>路由</title>    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>    <style>        a{            text-decoration: none;            color: black;            display: block;        }        #nav{            width: 500px;            height: 200px;            border: 1px solid black;            margin: auto;        }        ul{            list-style: none;            margin-left: -40px;            margin-top: 0px;        }        .hover{            background: cornflowerblue;        }        /*.a1{*/            /*background: cornflowerblue;*/        /*}*/    </style></head><body><div id="app">    <table style="border: 1px solid #cccccc;margin: auto;width: 300px;height: 50px;font-size: 18px;text-align: center">        <tr>            <td class="hover"><a href="#/show">商品列表</a></td>            <td><a href="#/user">用户信息</a></td>            <td><a href="#/address">地址信息</a></td>        </tr>    </table></div><div id="nav">    <a href="" class="a1"></a>    <a href="" class="a2"></a>    <a href="" class="a3"></a>    <a href="" class="a4"></a></div></div><script type="text/javascript" >    function Router(){        this.paths={};        this.curPath='';    }    Router.prototype={        path:function(str,callback){            var func=callback||function(){};            this.paths[str]=func;        },        refresh:function(){            this.curPath=location.hash.slice(1)||'/show'            this.paths[this.curPath]()        },        init:function(){            window.addEventListener('load',this.refresh.bind(this),true)            window.addEventListener('hashchange',this.refresh.bind(this),true)        }    }    var r=new Router();    var a1 = document.getElementsByClassName("a1");    var a2 = document.getElementsByClassName("a2");    var a3 = document.getElementsByClassName("a3");    var a4 = document.getElementsByClassName("a4");    r.path('/show',function(){        a1[0].innerHTML='外星人电脑';        a2[0].innerHTML='联想电脑';        a3[0].innerHTML='华硕电脑';        a4[0].innerHTML='神州笔记本';    })    r.path('/user',function(){        a1[0].innerHTML='张三';        a2[0].innerHTML='李四';        a3[0].innerHTML='王五';        a4[0].innerHTML='赵六';    })    r.path('/address',function(){        a1[0].innerHTML='上地一街';        a2[0].innerHTML='上地二街';        a3[0].innerHTML='上地三街';        a4[0].innerHTML='上地四街';    })    r.init()    $("td").mousemove(function(event) {        $(this).addClass('hover').siblings().removeClass('hover');    });    $("#nav a").mousemove(function(event) {       $(this).addClass('hover').siblings().removeClass('hover');    });</script></body></html>
阅读全文
1 0