使用实例：

使用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. Correct use of System.Web.HttpResponse.Redirect

    from:https://blogs.msdn.microsoft.com/tmarq/2009/06/25/correct-use-of-system-web-httpresponse-redire ...

  2. WIFI WPA1/2 Crack for Windows

    0x00 前言 目前WIFI WPA破解主要 以“aircrack-ng”为代表,运行于Linux系统( 如Kali Linux ),Windows系统比较少见,主要是Windows系统下WIFI网卡 ...

  3. centos7开启3306端口，liunx查看防火墙是否开启

    Can't connect to MySQL server on localhost (10061)这个就属于下面要说的情况 启动服务 systemctl start mariadb.service ...

  4. Python 内置彩蛋

    The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...

  5. JS 获取自定义标签

    <abc-aaa xwe='sdf'>AAAAAAAAAAAAAAAAAAAAAA</abc-aaa> alert($("abc-aaa").attr(&q ...

  6. C# 模拟鼠标(mouse_event)

    想必有很多人在项目开发中可能遇见需要做模拟鼠标点击的小功能,很多人会在 百度过后采用mouse_event这个函数,不过我并不想讨论如何去使用mouse_event 函数怎么去使用,因为那没有多大意义 ...

  7. java单例之enum实现方式

    传统的两私有一公开(私有构造方法.私有静态实例(懒实例化/直接实例化).公开的静态获取方法)涉及线程安全问题(即使有多重检查锁也可以通过反射破坏单例), 目前最为安全的实现单例的方法是通过内部静态en ...

  8. 给MySQL官方提交的bug report备忘

    1.  Bug #72215 When LOCK_plugin conflicts very much, one uninstall-audit-plugin operation crash  htt ...

  9. Webstorm 11 注册/破解方法

    激活时选择第二个,也就是License server在下面输入框中填http://idea.lanyus.com就行了

  10. Python Flask UnicodeDecodeError 编码错误解决

    折腾Python做快速Web开发.最后定下来用Flask,相对教程全面. utf8编码上遇到问题,所有文件已经是utf8编码保存,加载css.js等静态文件,如果用GBK编码就正常:用utf8就报Un ...