作为后续问题:进行水平滑动布局的最有效方法,是否可以在使用这样的单页布局时使浏览器的后退和前进按钮工作?
问问题
3538 次
3 回答
5
您可以使用 HTML5 中的历史 API 来实现这一点。
以下是一些帮助您入门的资源:
- http://diveintohtml5.info/history.html
- http://html5demos.com/history
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
为了在较旧的浏览器中也获得支持,有一些 JavaScript 库可以实现这一点:
Chrome 团队的高级示例,它使用了历史 API:
于 2012-09-09T10:31:48.093 回答
2
是的,您可以使用 HTML5 历史 API 来实现它。
于 2012-09-09T10:32:06.347 回答
0
以较旧的方式,您可以尝试使用书签,例如
<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>
于 2012-09-09T11:24:07.523 回答