javascript:jquery.history.js使用方法

step1:download jquery.history.js

step2:create a test page as following:

说明:当页面执行javascript代码后,地址栏能前进和后退。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#mydiv
{
border: 1px solid blue;
width: 400px;
height: 200px;
}
</style>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">
function showMsg(msg) {//you can ajax request
  $('#mydiv').html(msg);
}
$(function () {
  $("#link1").bind("click", function () { window.location.hash = "#link1"; });
  $("#link2").bind("click", function () {  window.location.hash = "#link2"; });
  $("#link3").bind("click", function () {  window.location.hash = "#link3"; });

  $.history.init(function (hash) {
    var msg;
    if (hash) {
      msg= hash;
    }

    else

    {
     msg= "no set hash value"
    }
    showMsg(msg);
  });
})
</script>

</head>
<body>
<input type="button" value="button1" id="link1" />
<input type="button" value="button2" id="link2" />
<input type="button" value="button3" id="link3" />
<hr />
<div id="mydiv">
</div>

</body>

</html>

posted on 2010-12-09 16:44 庹林 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/tuolin/archive/2010/12/09/1901439.html

javascript:jquery.history.js使用方法相关推荐

  1. pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...

  2. 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI

    前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...

  3. jq:jQuery库文件jquery.scrollLoading.js使用方法

    图片延迟加载,滚动到哪里加载到哪里: 1:头部加载库文件 <script type="text/javascript" src="/js/jquery.scroll ...

  4. jquery.cookie.js 使用方法

    Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...

  5. JavaScript jQuery遍历对象each()方法

    1遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作.如果想要给同一类元素做不同操作,就需要用到遍历. 语法1 : $ ("div") . each (function ( ...

  6. Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件

    之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...

  7. jQuery 插件取url参数[jquery.url.js]的使用以及文件下载

    方法一. 如题,直接上调用代码: jQuery.url.param("c") "c"就是当前url中的参数,记得要引用jquery.js和jquery.url. ...

  8. 拖拽插件jquery.dad.js

    带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. 表情转html,将jquery.qqFace.js表情转换成微信的字符码

    jquery.qqFace.js使用方法 引用 html 初始化 $(function () { $('.emotion').qqFace({ id: 'facebox', assign: 'sayt ...

最新文章

  1. 关于学习Python的一点学习总结(37->集合运算)
  2. UGUI的text赋值问题-速度
  3. vs运行时 文本可视化工具 无法点开_webpack 优化:2 款工具帮你找到构建速度“变慢”的原因...
  4. 2019 VOD编码工具指南
  5. 小甲鱼 OllyDbg 教程系列 (五) : 破解 PC Surgeon 之 查找字符串
  6. java 线程状态_浅析Java中的线程状态
  7. linux安装apache+mysql+php3.8练习环境
  8. android编译时注解,Android编译时注解框架系列2-Run Demo
  9. 机器学习基础(四十一)—— KNN
  10. dynamic集合动态添加属性
  11. 支持iphone的打印服务器,MAC苹果电脑系统 如何添加网络打印机(适用于Mac OS)
  12. java学生管理系统购买_GitHub - Xiaoxin-love/StudentSystem: java学生管理系统
  13. 微服务架构深度解析与最佳实践-第一部分:微服务发展历程和定义
  14. 树莓派 teamviewer 使用代理服务器上网
  15. 华为交换机的浮动路由及NQA动态切换
  16. python画行向日葵,基于matplotlib的向日葵散点图
  17. 12306余票查询(爬虫)
  18. 金山毒霸2012猎豹正式版_金山毒霸2012官方下载_最好的免费杀软
  19. 关于Linux下.bin格式文件的安装
  20. Python程序员自制爬虫小程序, 瞬间爬取十几万美女图片

热门文章

  1. 如何用emacs打开许多文件
  2. 如何编写配置文件 JAVA_SpringBoot 如何编写配置文件
  3. Excel批量转为Html,Html转换成Excel
  4. 为什么晚上咳嗽很厉害
  5. 部署GitLab时, 问题
  6. SLF4J: Failed to load class org.slf4j.impl.StaticLoggerBinder
  7. Java集合框架上机练习题:用户分别从两个文本框输入学生的姓名和分数.............
  8. POJ 1833 排列【STL/next_permutation】
  9. linux下安装python dlib依赖
  10. vue-cli中引入jquery方法