使用实例：

使用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. iis 故障导致网站无法访问

    服务器使用两三个月突然,昨天无法访问,重启后正常,第二次发生这样的事情了,打开  C:\WINDOWS\system32\LogFiles\HTTPERR  下的   httperr1.txt 201 ...

  2. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

  3. 使用LotusScript操作Lotus Notes RTF域

    Lotus Notes RTF域的功能也非常强大,除了支持普通的文本以外,还支持图片.表格.嵌入对象.Http 链接.Notes 链接.附件等等众多的类型.本文将介绍如何使用这些类来灵活操作富文本域. ...

  4. java 方法调用绑定

    将一个方法调用同一个方法主体关联起来被称作绑定.若在程序执行前进行绑定(由编译器和连接器实现),叫做前期绑定.读者可能从来没有听说过这个术语,因为它在面向过程语言中不需要选择就默认的绑定方式.例如C语 ...

  5. 【转】安装OpenSSL缺失Microsoft Visual C++ 2008 Redistributables的解决方案

    from: http://www.cnblogs.com/luguo3000/p/3539815.html 在安装OpenSSL的时候通常会提示以下错误: "The Win32 OpenSS ...

  6. [原创]android自定义动画的一点感悟

    android提供了一系列的动画处理api,包括animator以及animation等.由于动画效果是根据人眼视觉残留原理形成的,因此动画过程中android需要不断频繁的更新view的相关属性,由 ...

  7. Spring 注释 @Autowired 和@Resource 的区别

    Spring 注释 @Autowired 和@Resource 的区别 一. @Autowired和@Resource都可以用来装配bean,都可以写在字段上,或者方法上. 二. @Autowired ...

  8. 搬家至个人独立博客virson.cn

    最近正在将博客园的文章搬到自己的独立博客,以后基本上不会在博客园更新文章了,欢迎光临我的新博客:www.virson.cn,博客内容持续更新中……

  9. ux.plugin.ConTpl 模版元素监听扩展

    /* *tpl模版加入按钮 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-s ...

  10. 高效的INSERT INTO SELECT和SELECT INTO

    1.INSERT INTO SELECT,目标表必须存在,才可批量插入 INSERT INTO 目标表Table(field1,field2,field2,...) SELECT value1,val ...