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。

有没有办法实现这个目标？

编辑：

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

Answer 1

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

的东西

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

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

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

用后退按钮滑回div

1 个答案: