参考文章：

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. 利用spring的MultipartFile实现文件上传【原】

    利用spring的MultipartFile实现文件上传 主要依赖jar包 spring-web-3.0.6.RELEASE.jar 用到 (org.springframework.web.multi ...

  2. 六.HashMap HashTable HashSet区别剖析总结

    HashMap.HashSet.HashTable之间的区别是Java程序员的一个常见面试题目,在此仅以此博客记录,并深入源代码进行分析: 在分析之前,先将其区别列于下面: 1.HashSet底层采用 ...

  3. 设置 Visual Studio IIS Express 站点局域网访问

    Ø  Visual Stuido 的 IIS Express运行一个网站时,默认地址是这样的:http://localhost:23167/Cache/Three,其中 localhost 表示本机, ...

  4. 20155324 2016-2017-2 《Java程序设计》第5周学习总结

    20155324 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 try.catch 1.求平均数程序示例 import java.util.Scanner; ...

  5. luogu P3245 [HNOI2016]大数

    传送门 \(HNOI2019\)前最后一题了qwq 这题要分情况,如果\(p=2\)或\(5\),那么只要区间内最后一个数字是\(p\)的倍数就好了,这个可以莫队,也有更优秀的做法.莫队做法可以看代码 ...

  6. SFTP免密码登录原理

    概述 Public Key认证的主要魅力在于认证时承诺不必提供密码就能够同远程系统建立连接. Public Key认证的基础在于一对密钥,public key和private key,public k ...

  7. Spring 源码分析 spring-core 篇

    先来看下 spring-core 的包结构 总共有6个模块,分别是 asm.cglib.core.lang.objenesis.util asm包: 用来操作字节码,动态生成类或者增强既有类的功能.主 ...

  8. Django学习手册 - Form 插件

    """ 核心: from django import formsfrom django.forms import fieldsfrom django.forms impo ...

  9. 【Math for ML】矩阵分解(Matrix Decompositions) （上）

    I. 行列式(Determinants)和迹(Trace) 1. 行列式(Determinants) 为避免和绝对值符号混淆,本文一般使用\(det(A)\)来表示矩阵\(A\)的行列式.另外这里的\ ...

  10. C# 并行循环

    Parallel.For(); Paralle.ForEach() 异步编程模式