Start program two with HTML5 History.pushstate (State,null,url); (Not supported in IE9 and the following versions)
/** * HTML5 History and Ajax */$ (function () {var ajax, CurrentState; $ (' Li a '). Unbind (). bind (' click ', Function (e) {e.preventdefault (); var target = e.target, url = $ (target). attr (' href '); !$ (This). Hasclass (' current ') && $ (this). addclass (' current '). Siblings (). Removeclass ("current"); if (Ajax = = undefined) {CurrentState = {url:document.location.href, TITLE:DOCU Ment.title, HTML: $ ('. Content '). html ()}; } Ajax = $.ajax ({type: ' GET ', Url:url, DataType: ' HTML ', Success:function (HTML) {var state = {Url:url, Title:document.title, HTML: $ ('. Content '). html ()}; History.pushstate (State,null,url); $ ('. Content '). HTML (HTML) } }); }); });View Code
Home Code index.htm
<!DOCTYPE HTML><HTML> <Head> <title>New Document</title> <Linkrel= "stylesheet"href= "Http://css.baojia.com/s4/c/css/reset.css"> <style>Body{width:80%;margin:0 Auto}ul{margin:0 Auto;Overflow:None} /*ul li {float:left; background: #ccc;p adding:15px 20px;}*/ul Li{Display:inline-table;background:#ccc;padding:15px 20px; }ul Li:nth-of-type (1){Margin-left:0px} /*ul li {display:inline-table; background: #ccc;p adding:15px 20px;}*/ul Li a{Color:#f0f0f0;}ul li.current{background:#ffde32} /*. All-content{width:400px;float:left;overflow:hidden;}*/ </style> </Head> <Body> <Divclass= "Container"> <ulclass= "List"> <Li><ahref= "Page1.htm">Page 1</a></Li> <Li><ahref= "Page2.htm">Page 2</a></Li> <Li><ahref= "Page3.htm">Page 3</a></Li> <Li><ahref= "Page4.htm">Page 4</a></Li> <Li><ahref= "Page5.htm">Page 5</a></Li> <Li><ahref= "Page6.htm">Page 6</a></Li> </ul> </Div> <Divclass= "Content"> </Div> <Scriptsrc= "Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"type= "Text/javascript"></Script> <Scriptsrc=".. /js/index.js "type= "Text/javascript"></Script> </Body></HTML>View Code
Block URL hash and achieve page distribution, the main JS
View CodePlus a few test pages
Test Page 1
View CodeTest page 2 page2.htm, which adds a jump, because we have blocked a tag jump, so we can also implement a hash jump
View CodeTest Page 3 page3.htm Page3.css introduced an external chain CSS file, here to highlight. We introduced the CSS3 here, the page successfully loaded the Page3.css file, page3.htm style changed,
Then we went back to page2.htm. But the style of the page3.css did not affect the page2.htm. Here is a question to note, stating that the style file will be automatically removed, which is consistent with the page's stylesheet re-rendering.
View Code. Test3{display:block; Width:170px;height:200px;background-color: #fb9876}Test page 4 page4.htm. There's a way to trigger fun4 directly in here.
View CodeTest Page 5 Page5.htm The Document.body.onload method can be executed successfully and the $ (function () {}) method body of this page is executed
View CodeTest Page 6 page6.htm page6.js
View CodeView CodeFinally, you will find that the file whether it is outside the chain JS or inside the page JS, will be stored in the index.htm. This could lead to some bad tracking problems.
At this time of the time can be a brain complement the HTM page rendering process css and JS loading process.
And, incidentally, found some other issues to be aware of.
1, inline-table inline-block 4px spacing problem
2, Ajax read local file Setup problem
Front Page no refresh scenario two
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
