0

コンテンツを保持するために div/slides を使用する Web サイトを作成しています。これらは、overflow:hidden を使用してコンテナー内に配置されます。ナビゲーション バーは、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>

私の問題はこれです。前に表示されたdivを表示するようにCSSを変更するブラウザの戻るボタンを作成するにはどうすればよいですか。つまり、「ホーム」div に戻ることなく。

私はjavascriptとjqueryにかなり精通しています。その答えは、JQuery BBQ プッシュステートとハッシュタグにあることはわかっています。残念ながら、これらを私のサイト @ http://www.sumoto.com.auに実装することはできませんでした。フィドルは基本的にこのサイトで、私のジレンマを説明しやすくするために縮小されています。

基本的に、現在のcssビューの「スナップショット」をハッシュタグURLに保存し、ブラウザの戻る/進むナビゲーションを介してこれを「保存」と呼ぶにはどうすればよいですか?

4

1 に答える 1

0

問題を解決しました！

a 要素から雑然とした onclick 行をすべて削除しました。そして、それぞれにIDを追加しました。実際のハッシュタグ/ブラウザの戻るボタンの機能はhashchange、Ben Alman と、もちろん 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 操作が実行され、スライド移動が発生します。そうでない場合 (たとえば、ユーザーがクリックして戻る場合)、ボックスは元の (または前の) 構造に戻ります。

于 2013-07-21T10:58:28.717 に答える