2

我正在使用带有此代码的滑动 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。

有没有办法做到这一点？

编辑：

我尝试只添加锚点，但它似乎不起作用。

4

1 回答 1

2

我会使用类似这个 hashchange 插件http://benalman.com/projects/jquery-hashchange-plugin/

有一个在 hashchange 上执行的函数，可以将适当的框滑入视图

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

$(window).hashchange(function() {
    var hash = location.hash;
    slideBox(hash.substr(1));
});
于 2012-12-20T17:55:16.743 回答