84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我现在有三个页面,都是相关联的,点击跳转的 现在技术要求是点击不要有刷新,让客户感觉是在同一个页面里操作完成这三个页面 他现在也没有提供什么接口和请求我就三个静态页面, 我该怎么弄?????
人生最曼妙的风景,竟是内心的淡定与从容!
把三个页面代码放在一起,利用css的display控制显示隐藏?
如果用angular来做倒是很好实现的
同意 @TooBug 的方法,基本上就是点击的时候屏蔽掉默认跳转,然后使用 $.load 加载页面内容,该方法能非常方便的加载页面的部分内容,最后替换掉页面元素即可。我这里用原生的写一个 DEMO:
$.load
<p>我是本页内容</a> <button href="http://xx.com/page/you_need_load" class="btn">载入下一页</button> <script type="text/javascript"> function getHTML( url ) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest; xhr.responseType = "document"; xhr.open("GET", url, true); xhr.onload = function() { xhr.status === 200 ? resolve( xhr.response ) : reject( Error( xhr.status ) ); } xhr.onerror = function() { reject( Error( xhr.status ) ); } xhr.send( null ); }) } function loadPage(e) { e.preventDefault(); getHTML( this.href ).then( function( html ) { //可以直接复写整个页面的 HTML 代码,也可以复写一部分 document.querySelector("html").outerHTML = html.outerHTML; } this.removeEventListener("click", loadPage); } document.querySelector(".btn").addEventListener("click", loadPage); </script>
提前把数据取出来,用CSS控制吧
三个页面同时加载到一个页面上,通过display来控制显示哪个。
可使用AngularJS
把三个页面代码放在一起,利用css的display控制显示隐藏?
如果用angular来做倒是很好实现的
同意 @TooBug 的方法,基本上就是点击的时候屏蔽掉默认跳转,然后使用
$.load
加载页面内容,该方法能非常方便的加载页面的部分内容,最后替换掉页面元素即可。我这里用原生的写一个 DEMO:提前把数据取出来,用CSS控制吧
三个页面同时加载到一个页面上,通过display来控制显示哪个。
可使用AngularJS