html5 - history 历史管理

参考文章：

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

截图：

html5 - history 历史管理

代码：

<!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 历史管理

相关文章