至学了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. vs2012 发布web应用程序

    Visual Studio 2012 Visual Studio Express 2012 for Web 与 的Visual Studio 2010  Visual Studio Web发布更新 与 ...

  2. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  3. js中的文本编辑器控件KindEditor---那些打酱油的日子

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

  4. POJ 1160 题解

    Post Office Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18835   Accepted: 10158 Des ...

  5. css3的动画特性

    css3 的过渡动画,有些时候会产生一些其他问题. 比如:你想先改一个css属性,之后再进行动画过渡,结果实际上你会发现,css属性和动画是同步进行的.这个应该是在编译阶段就确定好了. 所以只能通过s ...

  6. VMware创建Linux虚拟机并安装CentOS(二)

    在VMware中鼠标单击“编辑虚拟机设置”,在弹出的“虚拟机设置”对话框中的“硬件”标签中选择“CD/DVD(IDE)”,然后在右侧的“CD/DVD(IDE)”连接选项中选择“使用ISO映像文件”,使 ...

  7. Apache InterfaceAudience

    InterfaceAudience 类包含三个注解类型,用来被说明被他们注解的类型的潜在的使用范围(audience).@InterfaceAudience.Public: 对所有工程和应用可用@In ...

  8. String对象方法扩展

    /** *字符串-格式化 */ String.prototype.format = function(){ var args = arguments;//获取函数传递参数数组,以便在replace回调 ...

  9. XNA游戏编程等

    XNA游戏编程:http://shiba.hpe.sh.cn/jiaoyanzu/WULI/soft/xna.aspx?classId=4 表示没学过XNA,但感觉还是很不错的,给学XNA的童鞋们参考 ...

  10. Linux_10个需要了解的Linux网络和监控命令(转)

    源文地址:http://www.linuxde.net/2013/10/15325.html 1. hostname hostname 没有选项,显示主机名字 hostname –d 显示机器所属域名 ...