Fork me on GitHub

单页面实现之hash

至学了angularJs后，发现这个单页面应用不知道在没有angularJs的情况下怎么实现。

所以就此对这个思考与资料并行，终于知道这个的实现基本原理。

首先angularJs的实现是hash值的变化，就是url#后的内容，但angularJs是对其进行了处理的，所以

观察不到#这个值，然后是每次点击导航都会转换页面，angularJs是在一个类名是ng-view的div容器中实现的。

所以angularJs是删除类名为ng-view里的内容后添加内容，那我们是不是可以简单的，显示和隐藏内容呢？

所以就是动手实现。

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hash深入</title>
    <style>
    html,body{
        width: 100%;
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        overflow: hidden;
        list-style: none;
    }
    ul li{
        float: left;
        margin-left: 10px;
    }
    .div{
        display: none;
        width: 100%;
        height: 100%;
    }
    .div1{
        background: red;
    }
    .div2{
        background: blue;
    }
    .div3{
        background: pink;
    }
    .div4{
        background: skyblue;
    }
    </style>
</head>
<body>
<!-- 需要自定义属性来实现关联 -->
    <ul>
        <li><a href="javascript:;" data-hash="one">首页</a></li>
        <li><a href="javascript:;" data-hash="two">页面一</a></li>
        <li><a href="javascript:;" data-hash="three">页面二</a></li>
        <li><a href="javascript:;" data-hash="four">页面三</a></li>
    </ul>
    <div class="div1 div" data-hash="one">首页</div>
    <div class="div2 div" data-hash="two">页面二</div>
    <div class="div3 div" data-hash="three">页面三</div>
    <div class="div4 div" data-hash="four">页面四</div>
    <script>
        var aNav=document.querySelectorAll("ul li a");
        var aPage=document.querySelectorAll(".div");
        for(var i=0;i<aNav.length;i++){
            aNav[i].onclick=function(){
                // dataset获取自定义属性
                    hash=this.dataset.hash;
                    for(var i=0;i<aPage.length;i++){
                        if(hash==aPage[i].dataset.hash){
                            // 显示匹配的页面
                            aPage[i].style.display="block";
                            // 改变url路径的hash
                            window.location.hash=hash;
                        }else{
                            // 隐藏其他页面
                            aPage[i].style.display="none";
                        }
                    }
                }
        }
        // 因刷新等有hash但不能显示目标页面而实现目标的显示
        refresh();
        function refresh(){
            var currentHash=window.location.hash.substr(1) || "one";
            for(var i=0;i<aPage.length;i++){
                        if(currentHash==aPage[i].dataset.hash){
                            aPage[i].style.display="block";
                            window.location.hash=currentHash;
                        }else{
                            aPage[i].style.display="none";
                        }
                    }
        }
        // 监听hash的变化，触发事件
        window.onhashchange=function(){
            // refresh()
            window.location.reload();
        }
    </script>
</body>
</html>
复制代码

 

posted @   小数点就是问题  阅读(987)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· C# 13 中的新增功能实操
· Supergateway：MCP服务器的远程调试与集成工具
· Vue3封装支持Base64导出的电子签名组件
点击右上角即可分享
微信分享提示