参考文章：

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. MVC的了解

    MVC是一种架构模式,程序分层,分工合作,各层既相互独立,有协同工作. MVC:Model+View+Controller Model层:业务数据的信息表示,关注支撑业务的信息构成,通常是多个业务实体 ...

  2. JS盒模型

    JS盒模型 ***** 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseIn ...

  3. 二十三、Linux 进程与信号---进程链和进程扇、守护进程和孤儿进程以及僵尸进程

    23.1 进程链和进程扇 23.1.1 概念 进程链:一个父进程构建出一个子进程,子进程再构建出子子进程,子子进程构建出子子子进程.... 这种就为进程链 进程扇:一个父进程构建出多个子进程,子进程都 ...

  4. 如何使用xss带cookie

    参考连接:https://pentesterlab.com/exercises/xss_and_mysql_file/course 打开测试网站: 然后在192.168.1.46机器上使用socat, ...

  5. iOS拍照图片旋转的问题

    很久之前,遇到了这种情况,iOS某端拍照上传到服务器,其他iOS端从服务器下载该照片展示,发现图片逆时针旋转了90度.当时百度了一下,找到一段代码修正image方向,问题解决了,但没有深入理解底层原理 ...

  6. Coursera, Deep Learning 4, Convolutional Neural Networks - week2

    Case Study (Note: 红色表示不重要) LeNet-5 起初用来识别手写数字灰度图片 AlexNet 输入的是227x227x3 的图片,输出1000 种类的结果 VGG VGG比Ale ...

  7. 第20月第18天 小码哥swift

    1. 9月12日第一次更新 第二篇玩转[斗鱼直播APP]系列之界面分析 第三篇玩转[斗鱼直播APP]系列之项目部署 第四篇玩转[斗鱼直播APP]系列之获取APP图片资源 第五篇玩转[斗鱼直播APP]系 ...

  8. Spark思维导图之Spark Streaming

  9. 【深入分析Java Web技术内幕】2、深入分析Java I/O的工作机制

    Java的I/O类库的基本架构 基于字节操作的IO接口:InputStream.OutputStream 基于字符操作的IO接口:Writer.Reader 基于磁盘操作的IO接口:File 基于网络 ...

  10. Spring的常用工具类

    官方文档 http://projects.spring.io/spring-framework https://docs.spring.io/spring/docs/current/javadoc-a ...