使用实例：

使用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. 取代奶瓶Minidwep-gtk破解WPA 全攻略

    取代奶瓶Minidwep-gtk 破 WPA 全攻略  目录 1. CDlinux 下使用 minidwepgtk 获取握手包并使用自带的字典破解 2. 自带的字典破解不出密码时使用 U 盘外挂字典继 ...

  2. 美团在Redis上踩过的一些坑-目录（本人非美团）（转）

    来自:http://carlosfu.iteye.com/blog/2254154 分为5个部分:    一.周期性出现connect timeout    二.redis bgrewriteaof问 ...

  3. [算法导论]DFS @ Python

    class Graph: def __init__(self): self.V = [] class Vertex: def __init__(self, x): self.key = x self. ...

  4. icmp,tcp,traceroute,ping,iptables

    有东莞的监控主机到北京BGP出问题了: 报警短信疯狂发送: 找东莞IDC和北京BGP服务商协查: 有个奇怪的问题:北京到东莞trcaceroute都有路由信息 东莞143段到北京全无路由信息:但,东莞 ...

  5. Porter/Duff，图片加遮罩setColorFilter

    同步发表于http://avenwu.net/2015/02/03/porterduff Fork on github https://github.com/avenwu/support 经常会遇到给 ...

  6. spring中配置了事务，数据业务层捕获异常，事务配置不成功？

    原理:spring aop  异常捕获原理:被拦截的方法需显式抛出异常,并不能经任何处理,这样aop代理才能捕获到方法的异常,才能进行回滚,默认情况下aop只捕获runtimeexception的异常 ...

  7. ssh框架搭建错误集合

    1,把jsp放入到WEB-INF/view目录下,struts2.xml配置<result name="success">/WEB-INF/view/home.jsp& ...

  8. [转]ASP.NET页面之间传递值的几种方式

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...

  9. MSIL 教程（二）：数组、分支、循环、使用不安全代码和如何调用Win32 API（转）

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/16/857574.html 续上文[翻译]MSIL 教程(一) ,本文继续讲解数组.分支.循环 ...

  10. Offer_answer_with_SDP_rfc3264

    Network Working Group J. RosenbergRequest for Comments: 3264 dynamicsoftObsoletes: 2543 H. Schulzrin ...