8. H5 Pushstate/popstate + Ajax Development No Refresh page

Css

*{margin:0;padding:0; }. M-a{float: Left;width:100px; }. M-a a{Display:Block;Height:30px;Line-height:30px;text-align:Center;Border:1px solid #000; }. M-a A.on{Background-color:#ccc; }. Con{float: Left;width:300px;Height:300px;Border:2px Solid Green; }

Html

<Divclass= "M-a"ID= "J_a">    <ahref= "Ajax.php?area=suzhou">Suzhou</a>    <ahref= "Ajax.php?area=wuxi">Wuxi</a>    <ahref= "Ajax.php?area=changzhou">Changzhou</a>    <ahref= "Ajax.php?area=zhenjiang">Zhenjiang</a>    <ahref= "Ajax.php?area=nanjing">Nanjing</a>    <ahref= "Ajax.php?area=yangzhou">Yangzhou</a>    <ahref= "Ajax.php?area=nantong">Nantong</a>    <ahref= "Ajax.php?area=huaian">Huaian</a>    <ahref= "Ajax.php?area=taizhou">Taizhou</a>    <ahref= "Ajax.php?area=lianyungang">Lianyungang</a>    <ahref= "Ajax.php?area=yancheng">Yancheng</a>    <ahref= "Ajax.php?area=suqian">Suqian</a>    <ahref= "Ajax.php?area=xuzhou">Xuzhou</a></Div><Divclass= "Con"ID= "J_con"></Div>

Js

varCitycon =[{con:' Suzhou Suzhou '}, {con:' Wuxi Wuxi '}, {con:' Changzhou Changzhou '}, {con:' Zhenjiang Zhenjiang '}, {con:' Nanjing Nanjing '}, {con:' Yangzhou Yangzhou '}, {con:' Nantong Nantong '}, {con:' Huaian Huaian '}, {con:' Taizhou Taizhou '}, {con:' Lianyungang Lianyungang '}, {con:' Yancheng Yancheng '}, {con:' Suqian Suqian '}, {con:' Xuzhou Xuzhou '}    ]; varElemenuon =NULL; varElemenu = $ (' #J_a a '). On (' click ',function(event) {var$ This= $( This), $oCon= $ (' #J_con '), Query= This. Href.split ('? ') [1]; Elemenuon&& elemenuon.removeclass (' on ')); Elemenuon= $ This. addclass (' on '); $oCon. html (citycon[$ This. Index ()].con); /** Ajax Request **/        //History Processing        vartitle = This. InnerHTML; Document.title=title; //history.pushstate ({}, ' page title ', ' xxx.html ')        //history.pushstate (state, title, URL) = Add record to browser        //State : The information that corresponds to the URL to jump        //Title : page title        //URL: The URL address to jump to, not across domains        if(Event &&/\d/.test (Event.button)) {//Judging Mouse EventsHistory.pushstate ({title:title}, title, Location.href.split ('? ') [0] + '? ' +query);    } event.preventdefault ();    }); //popstate History.go and History.back (including the user press the browser history forward Back button) trigger, and when the page is not brushed (because the use of pushstate modified history) will trigger the Popstate event, when the event occurs, the browser will remove the URL and the corresponding St The ATE object replaces the current URL and history.state. History.state can also be obtained through event.state. Window.addeventlistener (' Popstate ',function() {        varquery = Location.href.split ('? ') [1], Eletarget =NULL; Elemenu.each (function() {            if( This. Href.split ('? ') [1] = =query) {Eletarget= This; $( This). Trigger (' click ');        }        }); $ (Eletarget). Trigger (' Click '); });

8. H5 Pushstate/popstate + Ajax Development No Refresh page