2017-09-01 30 views
0

jQueryを使用して要素を表示および非表示にするWebページを作成しました。明白な問題が発生しました。 1つの場所にすべてがロードされるので、前後のブラウザボタンはもう機能しません。jQueryの履歴の使用

私は答えはjQuery History内にある知っているが、彼らのウェブサイトとStackOverflowの上ここに挙げた例で、数時間のために私の頭をつぶした後、私はまだに管理するカント:

A)履歴エントリを作成します(私は私が得たと思います

が必要と4のサブページがありますwww.grommit.nl:この)カバーされていないが、100%確か B)は、下に表示された自分自身の機能()

これは、ウェブサイトでのページ遷移をアニメーション化呼び出し時に履歴エントリ。

このコードは、「ワードプレスページ」の移行を示しています。他のページは同様の方法で動作します。これは現在、以前のように働いている機能がある

var LoadPageContent = function() { 
      $(".sceneBody").slideDown(function() { 
       $(".aftertitle").css('width', '4em'); 
       $(".mediacontainer").fadeTo('0.3s', 1,) 
      }); 

$("#goWordpress").click(function() { 
      $("#homeScene").fadeOut(function() { 
       $("#wordpressMessage").fadeIn(function() { 
        $(this).delay(300).slideUp(function() { 
         $("#wordpressPage, #grommitFixed").slideDown(function() { 
          LoadPageContent();        
         }); 
        }); 
       }); 
      }); 
     }); 

(これまでのところ、私は唯一の「LoadPageContent」機能付きpageloadの最後の部分を一般化するために管理している、その前のビットは、すべてのページとは異なります) DOM内のボタンをクリックします。前のボタンをクリックしたときにこの関数を実行したいと思います。

var goBack = function() { 
      $(".aftertitle").css('width', '0em') 
       $(".mediacontainer").fadeTo('0.3s', 0, function() { 
        $(".scenebody, #grommitFixed").slideUp(function() { 
         $("*[id*=Page]:visible").each(function() { 
          $(this).slideUp(function() { 
           $("#homeScene").fadeIn(); 
          }); 
         }); 
        }); 
       }); 

     }; 

答えて

0

html5には、ブラウザに何を返すかを伝えるために使用できるpushstateというものがあります。チェックアウト:

html pushstate