单页，旋转木马风格，幻灯片网站:在浏览器返回按钮上导航到上一张幻灯片，而不默认为主页幻灯片

Question

我正在制作一个使用div/幻灯片来保存内容的网站。它们位于溢出的容器内：隐藏。导航栏使用document.getElementById（'box'）.style.left='0px'来更改div位置，以将所需的div带入视图。左侧的CSS属性被更改为"onclick"，以使目标div进入视图，并将其他div推出容器查看区域。转换动画由CSS处理。

这是小提琴示例的链接。http://jsfiddle.net/HyHmF/1/。HTML代码如下，

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
                                   document.getElementById('box2').style.left='200px';
                                   document.getElementById('box3').style.left='400px';">Box 1</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
                      document.getElementById('box2').style.left='0px';
                      document.getElementById('box3').style.left='200px'";>Box 2</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
                      document.getElementById('box2').style.left='-200px';
                      document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>  

我的问题是这个。我如何让浏览器返回按钮来更改CSS，以将以前显示的div显示在视图中。也就是说，不返回到"主页"分区。

我对javascript和jquery相当熟悉。我知道答案在于JQuery BBQ推送状态和标签。不幸的是，我还没能在我的网站上实现这些功能@http://www.sumoto.com.au.小提琴基本上就是这个网站，缩小了规模，以便于解释我的困境。

从本质上讲，我如何将当前css视图的"快照"保存到标签url中，并通过浏览器的前后导航调用此"保存"？

Answer 1

我解决了我的问题！

我从a元素中删除了所有杂乱的onclick行。并为每个添加id。实际的标签/浏览器返回按钮功能由Ben Alman的hashchange提供，当然还有JQuery。

修改后的HTML是：

<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>                     
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>

Javascript

$(document).ready(function() {
    $(window).hashchange( function(){
    var hash = location.hash;
    var lc1 = $("#link1")
    if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
    if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
    });
    $(window).hashchange();
});

a链接是脚本的目标，并分配了一个var；"lc1"。if语句检查lc1（链接）的散列是否等于浏览器url。如果是，则执行css操作并进行滑动。如果不是（例如，当用户单击返回时），框将返回到其原始（或以前）构象。