JS实现路由跳转

柔情只为你懂 2022-06-07 09:10 324阅读 0赞

之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。

**示例图：**

**![Center][]**

**源码：**

<!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>

[Center]: /images/20220607/a7959ae462fa41fdb149ea4c4af4fbaa.png