使用实例：

使用onhashchange事件做一个简单的上一页下一页功能，并且当刷新页面时停留在当前页

html:

<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<button class="previous-page">上一题</button>
<button class="next-page">下一题</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
//json数据
var data = {
    "msg": [
        {
            "id" : 0,
            "cont" : "测试内容1",
        },
        {
            "id" : 1,
            "cont" : "测试内容2",
        },
        {
            "id" : 2,
            "cont" : "测试内容3",
        }
    ]
}
 // 使用 location.hash 属性来修改锚部分
 function changePart(id) {
    location.hash = id;
 }
 // 锚点改变后要执行的函数
 function myFunction(){
    var hasNum = getId();
    var _data = data.msg;
    var _item = _data[hasNum];
    render(_item);
 }
 //地址栏#id
 function getId(){
    var id = window.location.hash;
    if(id){
        return id.replace('#','');
    }else{
        return 0;
    }
 }
 // 渲染页面
function render(d){
    var val = d.id +"==="+d.cont;
    $("#demo").html(val);
}

$(function(){
     $('body').on('click','.next-page',function(){
        var hasNum = getId();
        var _d = data.msg,
        _i = Number(hasNum)+1;
        if(_i < _d.length){

changePart(_i);           
        }else{
            return false;
        }
    });
    $('body').on('click','.previous-page',function(){
        var hasNum = getId();
        var _d = data.msg,
        _i = Number(hasNum)-1;
        if(_i >=0 && _i < _d.length){
            changePart(_i);            
        }else{
            return false;
        }
    });

var hasNum = getId();
    var _data = data.msg[hasNum];
    render(_data);
    // 调用hashchange
    if(window.addEventListener){
        window.addEventListener("hashchange", myFunction,false);
    }else if(window.attachEvent){
        window.attachEvent("hashchange", myFunction);
    }
 })
</script>
</body>
</html>

遇到问题和解决方法：

一、当前页面中的a标签不能使用#锚点，否则会影响onhashchange的事件响应，导致hash无法改变，以至于点击上一页下一页按钮无法使用

二、不要在body标签上直接加<body onhashchange="myFunction()">，最好使用window.addEventListener("hashchange", myFunction,false);监听事件，否则在有些特殊的环境下，比如苹果手机的QQ中直接打开链接无法响应hashchange事件

onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）的更多相关文章

  1. WinForm下的键盘事件(KeyPress、KeyDown)及如何处理不响应键盘事件

    KeyDown事件用来处理功能键:F1 F2 F3... keyPress事件用来处理字符比如说:A B C... 1 2 3... 注:处理该事件时,需要先将窗体的 KeyPreview=true; ...

  2. 编写通用shell脚本启动java项目，适用于多数服务，只需修改服务名即可

    文件名:service-user.sh 文件内容: ##shell脚本的头文件必须有#!/bin/sh ##再次配置java环境变量以防报其他错误## java env#jdk安装目录export J ...

  3. IOS9.0中hash值的bug与解决方案

    事件起因 事情是这样的:产品上线发布,突然出现了问题.运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的.奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安 ...

  4. 【BZOJ2124】等差子序列 树状数组维护hash值

    [BZOJ2124]等差子序列 Description 给一个1到N的排列{Ai},询问是否存在1<=p1<p2<p3<p4<p5<…<pLen<=N ...

  5. JS中给函数参数添加默认值

    最近在Codewars上面看到一道很好的题目,要求用JS写一个函数defaultArguments,用来给指定的函数的某些参数添加默认值.举例来说就是: // foo函数有一个参数,名为x var f ...

  6. JS中给函数参数添加默认值（多看课程）

    JS中给函数参数添加默认值(多看课程) 一.总结 一句话总结:咋函数里面是可以很方便的获取调用函数的参数的,做个判断就好,应该有简便方法,看课程. 二.JS中给函数参数添加默认值 最近在Codewar ...

  7. extjs中第一次访问有效，第二次访问出现部分组件无法显示的，动态改变组件的label值的方法，ExtJs中组件最好少使用ID属性（推荐更多使用Name属性）

    在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...

  8. centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装，只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课

    centos  lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress  安装phpmyadmin  定时备份mysql两种方法  第二十五节 ...

  9. FreeRTOS 任务计数信号量，任务二值信号量，任务事件标志组，任务消息邮箱

    以下基础内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 计数信号量的另一种实现方式----基于任务通知(Task Not ...

随机推荐

  1. Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(二)

    一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l  说说关于cocos2dx手机分辨率适配 l  对前一篇完成的塔防游戏原型进 ...

  2. 三、oracle 体系结构

    1.oracle内存由SGA+PGA所构成 2.oracle数据库体系结构数据库的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制. oracle工作原理: 1).在数据库 ...

  3. spring发送邮件(多人接收或抄送多少带附件发送)

    系统中的附件分享功能界面 抄送多个效果图 多个接收者效果图 抄送多人带附件源码 多个接收者带附件源码

  4. fine-uploader 5.11.8 (最新版) 使用感受

    以前测试和使用过 3.X 因为够用,所以一直没升级,今天闲来无聊测试了一下最新版.和3.X比性能上好了很多,但不支持了移动设备的多文件上传. 关于3.X版 可以看这里:http://www.cnblo ...

  5. 分布式Hadoop安装（二）

    二.集群环境安装Zookeeper 1.         hadoop0,namenode机器下,配置zookeeper,先解压安装包. 使用命令:tar -zxvf zookeeper-3.4.4. ...

  6. Mysql自动备份工具1.0（2013年11月15日更新）

    Mysql自动备份工具1.0 下载地址 2013-11-15 1.解决日历控件在Windows7/8/8.1环境下遮挡按钮问题:2.解决按月备份当月没有该日期问题: 2013-11-13 1.Mysq ...

  7. 国内市场上 Android 手机屏幕分辨率的比例情况如何？

    http://www.zhihu.com/question/19587205 根据友盟发布的<友盟国内Android数据报告>,前六名分别是: 800×480,32.4% 480×320, ...

  8. WPF 设置程序开机自动运行(+注册表项)

    #region 设置程序开机自动运行(+注册表项) RegistryKey rgkRun = Registry.LocalMachine.OpenSubKey("SOFTWARE\\Micr ...

  9. atom 安装插件出现 EIO 错误

    今天给 atom 安装一个插件autocomplete-python的时候出现错误 npm ERR! Windows_NT 6.1.7600 npm ERR! argv "C:\\Progr ...

  10. C#记录对象的变化

    经常,我们会遇到一个场景,在保存对象到数据库之前,对比内存对象和数据库值的差异. 下面我写了一种实现,为保存定义一个事件,然后自动找出对象之间的差异,请注意,并没有通过反射的方式去获取每个属性及其值. ...