参考文章：

w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history

　张鑫旭  :　http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

zawa   :  http://zawa.iteye.com/blog/1271031　

Demo : Demo

截图：

代码：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>选项卡</title>

<style>

body {background: #444; }

p{margin:0;}

.tab_bor{width:500px;margin:20px auto;overflow:}

.tab_bor ul{padding:10px 10px 0 10px;margin:0; display:inline-block;}

.tab_bor li{border:1px solid #fff;border-bottom:none;background:#1b5775;color:#fff;font-weight:bold;padding:0 10px; line-height:32px; font-size:14px;float:left;margin:0 2px;list-style:none; cursor:pointer;border-bottom:none;}

.tab_bor .active{ border:1px solid #fff;color:#fff; position:relative;top:1px;border-bottom:none;background:#187cc2;}

.tab_bor p{padding:10px;color:#fff;font-size:12px;border:1px solid #fff; display:none;background:#383838;height:100px;}

.tab_bor .show{display:block;background:#187cc2;}

</style>

<script>

window.onload = function(){

	var oDiv = document.getElementById('div1'),

		aLis = oDiv.getElementsByTagName('li'),

		aPs  = oDiv.getElementsByTagName('p');

	for( var i=0,len = aLis.length;i<len;i++ ){

		aLis[i].index = i;

		aLis[i].onclick = function(){

			var index = this.index ;

			var name = this.dataset.name;

			var title = '选项卡'+(index+1);

			document.title = title;

			history.pushState(index,title, '#'+name);

			for( var i=0,len = aLis.length;i<len;i++ ){

				aLis[i].className = '';

				aPs[i].className = '';

			}

			this.className = 'active';

			aPs[ index ].className = 'show';

		}

	} 

	if( history.pushState ){

		window.onpopstate = function( ev ){

			var ev = window.event || ev;

			var state = ev.state || 0;

			for( var j=0,len = aLis.length;j<len;j++ ){

					aLis[j].className = '';

		 			aPs[j].className = '';

		 	}

	 		aLis[state].className = 'active';

	 		aPs[state].className = 'show';

		}

	}

	window.onhashchange = function(){

		setLocHistory();

	}

	setLocHistory();

	function setLocHistory(){

		var locName = location.href.split("#")[1] || 'tab1';

		for( var i=0,len = aLis.length;i<len;i++ ){		

			if( locName == aLis[i].dataset.name ){

				for( var j=0,len = aLis.length;j<len;j++ ){

					aLis[j].className = '';

					aPs[j].className = '';

				}

				aLis[i].className = 'active';

				aPs[i].className = 'show';

			}

		}

	}

}

</script>

</head>

<body>

	<div class="tab_bor" id="div1">

		<ul>

	    	<li class="active" data-name="tab1">标签一</li>

	        <li data-name="tab2">标签二</li>

	        <li data-name="tab3">标签三</li>

	        <li data-name="tab4">标签四</li>

	    </ul>

	    <p class="show"  data-name="tab1">

	    	内容一

	    </p>

		<p  data-name="tab2">

	    	内容二

	    </p>

		<p  data-name="tab3">

	    	内容三

	    </p>

	    <p data-name="tab4">

	    	内容四

	    </p>

	</div>

</body>

</html>

　

后记：

这“history.pushState” 必须在服务端才能生肖，所以这页面在服务端打开。

大致讲讲api 前边的文章已经很详尽了：

history.pushState 三个参数  第一个参数为存储的数据，第二值是设置document.title的值(不过这个方法现在还没有完全实现)，第三个值是url路径(这个需要和后台配合。。。。其实我也不是很懂。。。。);

window.onpopstate 相当于取值 ev.state 就是history.pushState存储的数据值;

window.onhashchange 只要location有变化就执行方法的事件;

他的应用当然有些说是做这个 翻页的记录什么的 其实也有可以做这些一站式开发的打开判断，我这demo就是模拟一站式开发的意思。

html5 - history 历史管理的更多相关文章

  1. HTML5自学笔记[ 8 ]历史管理

    触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...

  2. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  3. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. HTML5历史管理状态机制

    前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...

  5. Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  6. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  7. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  8. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...

  9. Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装

    1.软件简介    Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...

随机推荐

  1. DotNet 资源大全中文版

    https://blog.csdn.net/fhzh520/article/details/52637545 目录 算法与数据结构(Algorithms and Data structures) 应用 ...

  2. expdp和impdp导入导出用法【转】

    关于expdp和impdp exp和imp是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用.expdp和impdp是服务端的工具程序,他们只能在ORACLE服务端使用,不能在客户端使用.i ...

  3. openstack服务启动之nova-compute

    在openstack中,消息的传递一共有两种方式,分别是:服务之间的传递调用Restful api,服务中模块之间的传递使用消息队列.每一个模块在启动是都会启动消息队列,等待队列中的有消息到来.所以模 ...

  4. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

  5. 【转载】C# 泛型详解

    https://www.cnblogs.com/yueyue184/p/5032156.html

  6. 持续集成CI相关的几个概念

    持续集成 https://en.wikipedia.org/wiki/Continuous_integration 为什么要持续? 持续集成, 可以避免集成地狱(由于工作的源码 和 库中的源码的差异导 ...

  7. React 体验

    https://github.com/facebook/create-react-app npm i -g create-react-app cd  <your-folder> creat ...

  8. 使用WebSocket帮助应用程序群集节点间通信

    [序列化message传输方式]两种方式都是转成二进制. 1.使用Java序列化器,ObjectXXXputStream 2.使用ByteBuffer.wrap(bytes). 在一个标准群集场景中, ...

  9. oracle 重建索引以及导出所有的索引脚本(可以解决还原数据库文件时先还原数据，在重新用脚本创建索引)

    导出数据库备份文件 1. 备份服务器数据,采用并行方式,加快备份速度(文件日期根据具体操作日期修改) expdp jhpt/XXXX directory=databackup dumpfile=dpf ...

  10. [C++]PAT乙级1008.数组元素循环右移问题 (20/20)

    /* 1008. 数组元素循环右移问题 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 一个数组A中存有N(N>0)个整数, ...