javascript - 使用后退按钮将 div 向后滑动

Question

我在这段代码中使用滑动div:

html:

   <div id="container">

<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>


    </div>

CSS:

    body {
      padding: 0px;    
    }

    #container {
     position: absolute;
     margin: 0px;
     padding: 0px;
     width: 100%;
     height: 100%;
     overflow: hidden;  
    }

  .box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
  }

  #box1 {
   left: 50%;

js:

 $('.box').click(function() {

$(this).animate({
    left: '-50%'
}, 500, function() {
    $(this).css('left', '150%');
    $(this).appendTo('#container');
});

$(this).next().animate({
    left: '50%'
}, 500);
});​

这里有jsfiddle:http://jsfiddle.net/jtbowden/ykbgT/2/

我希望能够使用浏览器的上一个按钮返回到上一个 div。

有办法实现吗？

编辑:

我尝试仅添加 anchor ，但似乎不起作用。

Answer 1

我会使用类似 hashchange 插件 http://benalman.com/projects/jquery-hashchange-plugin/ 的东西

有一个在 hashchange 上执行的函数，将适当的框滑入 View

当您使用浏览器的后退和前进按钮时，它会更改哈希值并且您的代码将运行。

$(window).hashchange(function() {
    var hash = location.hash;
    slideBox(hash.substr(1));
});