0

私は、4 つの「ページ」を保持する幅 4400 の sitecontent という名前の div を持っている単一ページの Web サイトを持っています。ページは、sitecontent の 0px、sitecontent の 1100 px、sitecontent の 2200px、および 3300px から始まります。

Jquery を使用して div の位置を正しいピクセルに設定するため、正しいテキストが表示されます。リンクを押した後、たとえば次のようになります。

<div id="site-content" style="left: -1100px;">

ページの 1 つで、ページを更新する必要があります。この更新後、同じ「ページ」を 1100px で表示したいのですが、ホームページの 0px から開始します。

サイトのコンテンツがホームの -1100px から始まるようにする方法はありますか?

前もって感謝します、

乾杯

4

3 に答える 3

3

ページの読み込み時に解析できる URL のハッシュに識別子を追加する必要があります。

例えば：

 http://www.somewebpage.com/somepage#page1

次に、ページの読み込み時に、このハッシュ値を検査し、すぐに UI を変更して新しいページを表示できます。

 var hash = window.location.hash;

 if(hash == "#page1")
    $('#site-content').css('left', '-1100px');
于 2012-05-03T19:02:09.203 に答える
0

Tejsが提案しているものと非常によく似たアプローチは、ハッシュの変更をリッスンするハッシュベースのルーティングフレームワークを使用することです。2つの異なる場所でスクロールを定義する必要がないため、コードがよりクリーンになります。

ページ内のすべてのリンクは現在、jQueryイベントリスナーによって監視されています（クリック->コンテンツコンテナを移動して目的のコンテンツを表示します）。HTMLはおそらく次のようになります<a href="#">Contact details</a>。

このアプローチでは、これらのリンクを監視する必要はありません。代わりに、ハッシュを変更させるだけです<a href="#page2">Contact details</a>。

次に、ハッシュを観察し、変更に対応します。Simrouフレームワーク（https://github.com/buero-fuer-ideen/Simrou）を使用していますが、同様の機能を提供する他のフレームワークを使用できます。

jQuery(document).ready(function() {
    // Define a function that moves the content, e.g. moveContent(3300);
    function moveContent(pixelPosition) {
        $('#site-content').css('left', '-' + pixelPosition + 'px');
    }

    // Setup the router
    var router = new Simrou({
        'page1': function() { moveContent(0); },
        'page2': function() { moveContent(1100); },
        'page3': function() { moveContent(2200); },
        'page4': function() { moveContent(3300); }
    });
    router.start();
});

必要なJavaScriptはこれだけです。

（そして、ここに素早く汚いフィドルがあり、全体を示しています：http: //jsfiddle.net/R7F6r/）

于 2012-05-03T19:32:36.857 に答える
0

Cookie を使用して値を保存すると、ページが読み込まれるたびに Cookie をチェックして、収集された値を処理する必要があります。

Jquery Cookieのリンクとダウンロードと使用方法のマニュアル!

HTML（例）

<a href="#" title="Go Page 1" id="page_01" class="setCookie">
  Click to view page 01
</a>

JQUERY (jquery.cookie)

// SET THE COOKIE
$('.setCookie').bind("click", function() {
  var pageNumber = $(this).attr("id");
  $.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' });
});


// READ THE COOKIE
$(function() {
  var oldNumber = $.cookie('the_cookie_name');
  if (oldNumber !== NULL) {
   $("#page_"+oldNumber).trigger("click");
  }
});

ノート：

ページを変更するために現在使用しているリンクには、Cookie の作成をトリガーするクラス「setCookie」と、ページ番号を識別するために使用されている ID が必要です。

これの利点の 1 つは、Cookie を保存する期間を制御できるため、訪問者が Web サイトのエクスペリエンスを再開できることです。

于 2012-05-03T19:12:31.773 に答える