至学了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. Oldboy-Homework-Week2.2

    一.关于Python全栈开发第二周所讲内容的回忆(上篇)6.列表(list).元组(tuple).字典(dictionary)7.字符串.及其字符串格式化输出8.for循环二.详细内容6.1列表:列表 ...

  2. 单链表、循环链表的JS实现

    数据结构系列前言: 数据结构作为程序员的基本知识,需要我们每个人牢牢掌握.近期我也展开了对数据结构的二次学习,来弥补当年挖的坑......   当时上课的时候也就是跟着听课,没有亲自实现任何一种数据结 ...

  3. 导入数据经常使用的SQL语句整理整理

    1.事务(基本) GO BEGIN TRY BEGIN TRAN -- 导入数据 COMMIT TRAN END TRY BEGIN CATCH ROLLBACK TRAN END CATCH GO ...

  4. js判断图片是否加载完成

    var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}

  5. tomcat -ROOT 与webapps 的关系，关于部署的一些问题

    现象:之前遇到很奇怪的问题,发完版之后没有效果,页面还是读取上一版的. 反复查找原因发现  http://localhost:8080/mobie 这个路径下的页面是正常的, 而  http://lo ...

  6. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  7. IIS 连接 oracle报Oracle.DataAccess版本错误解决办法

    通过IIS连接oracle时报“Could not load file or assembly 'Oracle.DataAccess, Version=2.112.3.0, Culture=neutr ...

  8. heml设置浏览器版本

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> action类获取se ...

  9. 安卓图标IconFont使用

    一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...

  10. HTTP协议详解（转）

    转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...