AngularJs调用路由

最新推荐文章于 2024-05-10 16:47:39 发布

一只向上的小蜗牛

最新推荐文章于 2024-05-10 16:47:39 发布

阅读量282

点赞数 1

本文链接：https://blog.youkuaiyun.com/hongfuqiang/article/details/78294772

版权

本文介绍了一个简单的前端路由实现方案，通过监听hash改变触发不同页面内容的显示，并利用jQuery实现导航栏高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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