至学了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. ubuntu14.04禁用自动待机保持屏幕亮度

    http://jingyan.baidu.com/article/9989c7461fd041f648ecfe05.html

  2. js闭包

    先从闭包特点解释,应该更好理解. 闭包的两个特点: 1.作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态.2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 其实上面两点可以合成一 ...

  3. [SE0]简单的搜索引擎原理

    1.简单了解搜索引擎收录的原理  包括baidu. google .yahoo 在内的各大搜索引擎在内基本上搜录网站的原理大致相同(除了国内某些网站 网1新 l 等采取人工登记的办法),搜索引擎都是采 ...

  4. Android 无标题 全屏设置

    标题栏和状态栏 Android程序默认情况下是包含状态栏和标题栏的. 在Eclipse中新建一个Android程序,运行后显示如下: 图中标出了状态栏(显示时间.电池电量.网络等)和标题栏(显示应用的 ...

  5. linux platform设备与驱动

    struct platform_driver { int (*probe)(struct platform_device *); int (*remove)(struct platform_devic ...

  6. Docker中images无法使用apt-get update解决方案

    问题描述:使用apt-get update一直fail 原因:DNS设置错误 解决办法: nm-tool #查看DNS后面的数(IPv4),将后面的数copy下来 sudo nano /etc/def ...

  7. Ubuntu install codeblocks by ppa

    sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update sudo apt-get install ...

  8. JSPatch 中 defineClass 中覆盖方法的使用

    今天研究了一下JSPatch,发现好神奇好奇妙,感觉这几天我都会乐此不彼的去研究这个高大上的东西. 出处来着:https://github.com/bang590/JSPatch 简单介绍一下这个 d ...

  9. USER STORIES AND USE CASES - DON’T USE BOTH

    We’re in Orlando for a working session as part of the Core Team building BABOK V3 and over dinner th ...

  10. 关于learntorank http://qiita.com/rockhopper/items/bb3d46f01df5f6499123

    一.数据转换 如何对于训练数据做pairwise的transform,比如你原始数据是要么点击要么不点击,如何对这些样本数据做pairwise的transform? 下面的方法主要是做组合的方法,就是 ...