html5 - history 历史管理
參考文章：
? ?w3c ? ? : ?http://www.w3.org/html/ig/zh/wiki/HTML5/history
張?chǎng)涡??: 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>選項(xiàng)卡</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 = '選項(xiàng)卡'+(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">標(biāo)簽一</li><li data-name="tab2">標(biāo)簽二</li><li data-name="tab3">標(biāo)簽三</li><li data-name="tab4">標(biāo)簽四</li></ul><p class="show" data-name="tab1">內(nèi)容一</p><p data-name="tab2">內(nèi)容二</p><p data-name="tab3">內(nèi)容三</p><p data-name="tab4">內(nèi)容四</p></div> </body> </html>
后記：
這“history.pushState” 必須在服務(wù)端才能生肖，所以這頁(yè)面在服務(wù)端打開(kāi)。
大致講講api 前邊的文章已經(jīng)很詳盡了：
history.pushState 三個(gè)參數(shù) ?第一個(gè)參數(shù)為存儲(chǔ)的數(shù)據(jù)，第二值是設(shè)置document.title的值(不過(guò)這個(gè)方法現(xiàn)在還沒(méi)有完全實(shí)現(xiàn))，第三個(gè)值是url路徑(這個(gè)需要和后臺(tái)配合。。。。其實(shí)我也不是很懂。。。。);
window.onpopstate 相當(dāng)于取值?ev.state 就是history.pushState存儲(chǔ)的數(shù)據(jù)值;
window.onhashchange 只要location有變化就執(zhí)行方法的事件;
他的應(yīng)用當(dāng)然有些說(shuō)是做這個(gè) 翻頁(yè)的記錄什么的 其實(shí)也有可以做這些一站式開(kāi)發(fā)的打開(kāi)判斷，我這demo就是模擬一站式開(kāi)發(fā)的意思。
?
轉(zhuǎn)載于:https://www.cnblogs.com/auok/p/4690134.html
總結(jié)
以上是生活随笔為你收集整理的html5 - history 历史管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 京东投用新疆最大产地智能供应链中心：农特
- 下一篇： 2015年08月