作为后续问题: 最有效的方法做一个横向滑动的布局 ,是有可能使用单页面布局一样,当使浏览器的前进和后退按钮的工作?
Answer 1:
您可以使用历史API在HTML5来实现这一目标。
这里有一些资源,让你开始:
- http://diveintohtml5.info/history.html
- http://html5demos.com/history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
要获得旧版浏览器的支持,以及有JavaScript库,使的是:
- https://github.com/browserstate/History.js/
高级例如通过Chrome团队,使用历史API:
- http://www.20thingsilearned.com/en-US
Answer 2:
是的,你可以使用HTML5历史API来实现它。
- 演示: http://html5demos.com/history
- 文档: http://diveintohtml5.info/history.html
Answer 3:
在旧的方式,你可以尝试使用书签,例如
<html>
<head>
<script type="text/javascript">
function goPage (v) {
var idisplay = v == 'i',
adisplay = v == 'a',
bdisplay = v == 'b';
document.getElementById('anchor_i').style.display = idisplay? 'none' : 'block';
document.getElementById('anchor_a').style.display = adisplay? 'none' : 'block';
document.getElementById('anchor_b').style.display = bdisplay? 'none' : 'block';
document.getElementById('content_i').style.display = idisplay? 'block' : 'none';
document.getElementById('content_a').style.display = adisplay? 'block' : 'none';
document.getElementById('content_b').style.display = bdisplay? 'block' : 'none';
}
</script>
</head>
<body>
<a name="index"></a>
<div id="content_i">
index
</div>
<a id="anchor_i" href="#index" onclick="goPage('i');" style="display: none">to index</a>
<a id="anchor_a" href="#page_a" onclick="goPage('a');">to page_a</a>
<a id="anchor_b" href="#page_b" onclick="goPage('b');">to page_b</a>
<a name="page_a"></a>
<div id="content_a" style="display: none">
page a
</div>
<a name="page_b"></a>
<div id="content_b" style="display: none;">
page b
</div>
</body>
</html>
文章来源: How to make browser back and forward work on a single page layout?