至学了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>

单页面实现之hash的更多相关文章

  1. 单页面SPA应用路由原理 history hash

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. hash值是啥，单页面应用的实质

    1.什么hash Location hash属性,http://www.runoob.com/jsref/prop-loc-hash.html,hash 属性是一个可读可写的字符串,该字符串是 URL ...

  3. 利用hash或history实现单页面路由

    目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  6. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  7. 实现类似 QQ音乐网页版 的单页面总结

    最近需要对创业团队的网站进行改版,而我负责前端设计和实现. 下面是一些总结与体会: 当设计完成之前,我就跟和我配合的Java 后台说用iframe实现,结果说麻烦不肯,到最后突然对我说还是用ifram ...

  8. MVC route 和 Angular router 单页面的一些方式

    直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...

  9. H5单页面架构：backbone + requirejs + zepto + underscore

    首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...

随机推荐

  1. ASP.NET中GridView数据导出到Excel

    /// <summary> /// 导出按钮 /// </summary> /// <param name="sender"></para ...

  2. some useful linux commands

    # best way to see log file less +F /var/log/syslog (equals: less /var/log/syslog, then shift+f) # se ...

  3. 关于handler 和 looper 的问题

    重新去学习回顾looper和handler ,还是需要重新认识这个经常使用的机制. 我首先是看任玉刚老师的书<android的开发艺术探索>的第十章. 里面一句话开始说出了我们大概的理解— ...

  4. Hoops随便记的

    段 包含图形的段·几何·属性:颜色,可见性,选择功能等等·子段:更低层的段段的名称·段可以进行命名·可以像文件系统一样表示路径:绝对路径.相对路径.通配符当前段(激活的段)·你可以在任何一个时间来处理 ...

  5. Terminology: Sandbox

    In Comupter Secuity: from https://en.wikipedia.org/wiki/Sandbox_(computer_security) In computer secu ...

  6. Uboot+Linux启动时间优化

    动机 设备启动时间往往是项目立项时的一项重要技术指标.快速的启动时间意味着设备宕机时间的缩短,系统的快速恢复,也能改善用户使用时的体验感受,是一项重要的市场竞争力. 准备 优化启动时间之前,我们首先要 ...

  7. android webView开发之js调用java代码示例

    1.webView设置 webView.getSettings().setJavaScriptEnabled(true);//设置支持js webView.addJavascriptInterface ...

  8. browsersync实现网页实时刷新(修改LESS,JS,HTML时)

    var gulp = require("gulp"), less = require("gulp-less"), browserSync = require(& ...

  9. Python yield函数理解

    Python中的yield函数的作用就相当于一个挂起,是不被写入内存的,相当于一个挂起的状态,用的时候迭代,不用的时候就是一个挂起状态,挂起状态会以生成器的状态表现

  10. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...