参考文章：

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. MySQL数据类型2

    一.MySQL的数据类型 主要包括以下五大类: 整数类型:BIT.BOOL.TINY INT.SMALL INT.MEDIUM INT. INT. BIG INT 浮点数类型:FLOAT.DOUBLE ...

  2. HDU 1284(钱币兑换 背包/母函数)

    与 HDU 1028 相似的题目. 方法一:完全背包. 限制条件:硬币总值不超过 n. 目标:求出组合种数. 令 dp[ i ][ j ] == x 表示用前 i 种硬币组合价值为 j 的钱共 x 种 ...

  3. [Android] Android 用于异步加载 ContentProvider 中的内容的机制 -- Loader 机制 （LoaderManager + CursorLoader + LoaderManager.LoaderCallbacks）

    Android 用于异步加载 ContentProvider 中的内容的机制 -- Loader 机制 (LoaderManager + CursorLoader + LoaderManager.Lo ...

  4. WeUI0.6.0有一个Calendar在浏览器下无法直接打开问题

    主要原因是判断浏览器不支持导致.修改isPopover相关部分代码即可.

  5. 一次enq: TX - index contention等待事件处理

    收到告警短信: BOMC一般告警,告警2次,最后告警时间:03-03 22:21,监控对象:/XX系统/数据库/ORACLE数据库/XXX.XX.XX.XX*XXXDB_LE_DBS/ORACLE实例 ...

  6. 29. SpringBoot Redis 非注解

    1. 引入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  7. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  8. 利用openpyxl模块来操作Excel

    python 读写 excel 有好多选择,但是,方便操作的库不多,在我尝试了几个库之后,我觉得两个比较方便的库分别是 xlrd/xlwt.openpyxl. 之所以推荐两个库是因为这两个库分别操作的 ...

  9. TensorFlow从入门到理解（四）：你的第一个循环神经网络RNN（分类例子）

    运行代码: import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # set rando ...

  10. Python 爬虫五 进阶案例-web微信登陆与消息发送

    首先回顾下网页微信登陆的一般流程 1.打开浏览器输入网址 2.使用手机微信扫码登陆 3.进入用户界面 1.打开浏览器输入网址 首先打开浏览器输入web微信网址,并进行监控: https://wx.qq ...