JS实现路由跳转

最新推荐文章于 2024-08-26 16:00:40 发布

xy8199

最新推荐文章于 2024-08-26 16:00:40 发布

阅读量5.1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/xy8199/article/details/78258085

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

之前我们用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>