至学了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. oracle（sql）基础篇系列（三）——数据维护语句、数据定义语句、伪列

      DML语句 insert 向表中插入新的记录   --三种插入方式 --(1)不写字段的名字,直接按照字段的顺序把值逐个往里插 insert into dept2 values(50,'DANAM ...

  2. 动作手游实时PVP帧同步方案（客户端）

    1.概述 1.1.基于UDP的帧同步方案 在技术选型方面,之所以选择帧同步方案,在Kevin的一篇介绍PVP帧同步后台实现的文章中已经做了详细叙述,这里简单摘要如下: 高一致性.如果每一帧的输入都同步 ...

  3. docker入门-学习笔记

    docker可以类比成window下的VMware或者virtualbox软件.docker有两个基本的概念:容器(container)和镜像(image),分别对应为VMware中的系统镜像和系统镜 ...

  4. DateTable利用NPOI导出Excel 公共方法

    protected void Export_Excel(DataTable dt) { string filename = "学生基本信息.xls"; ) { filename = ...

  5. CI框架代码运行最详细的流程

    最近在学习CI(3.1.0-dev)框架源码,一边看源码,一边在github上面写中文注释,https://github.com/pandancode/CI-note,有兴趣的同学可以看看. inde ...

  6. windows 10 开始菜单和cortana无法工作的问题

    过了个周末,到了实验室一开机发现报了个关键错误:开始菜单和cortana无法工作. 经过一番google ,发现问题,原来是360禁用了一个服务导致,这个服务是UserManager. 我直接去开启发 ...

  7. 弱省互测#0 t3

    Case 1 题意 要求给出下面代码的答案然后构造输入. 给一个图, n 个点 m 条边 q 次询问,输出所有点对之间最大权值最小的路径. 题解 把每一个询问的输出看成一条边,建一棵最小生成树. Ca ...

  8. asp.net 页面上的点击事件

    asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...

  9. Ubuntu安装Oracle SQLDeveloper

    1、下载Oracle安装文件 这里我下载的是Linux RPM版本，文件名为sqldeveloper-4.0.3.16.84-1.noarch.rpm http://www.oracle.com/te ...

  10. php清理当前目录下的指定文件和空目录(源码),建议服务器端执行

    <?php /** * @desc 解析当前目录并递归删除目录下的指定文件 * @author mengdj<mengdj@outlook.com> 2014.10.02 1530 ...