onhashchange事件,只需要修改hash值即可响应onhashchange事件中的函数(适用于上一题下一题和跳转页面等功能)
使用实例:
使用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事件
最新文章
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
- Two Sum (c#)
- c/c++与Python的语法差异
- linux命令详解之挂载光驱的方法
- OS概论1
- 用java具体代码实现分数(即有理数)四则运算
- [C#参考]UI和线程(一)
- ThinkPHP - 组织分类结构
- kobox : key_waitqueue.c -v1 如何内核线程,如何使用等待队列
- [使用]Git--命令行
- 验证码计时 -- UIButton setTitle 闪烁问题解决方案
- CRM客户关系管理系统(三)
- [C#6] 8-异常增强
- SQL数据库连接语句
- python基础之 迭代器回顾,生成器,推导式
- 从零开始搭建Webpack+react框架
- 关于ELK
- Windows 10 中的 Shell 指令
- SALT+HASH撒盐加密
- 待解决:PDF header signature not found