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

このハッシュ変更プラグインのようなものを使用します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 に答える