0

Web サイトでのコンテンツの表示方法を変更したい:

var FNav = {
init: function() {
    $("a[href*=#]").click(function(e) {
    e.preventDefault();
        if($(this).attr("href").split("#")[1]) {
            FluidNav.goTo($(this).attr("href").split("#")[1]);
        }
    });
    this.goTo("home");
},
goTo: function(page) {
    var next_page = $("#"+page);
    var nav_item = $('nav ul li a[href=#'+page+']');
    $(".page").fadeOut(500);
    next_page.fadeIn(500);

この JavaScript を変更して、適切な戻るボタンの機能を持たせるにはどうすればよいですか?

私が試したこと（失敗）。これらは私が試した解決策ですが、上記のjavascriptを変更することはありません. そのため、どれも機能していないように見えると思います。

  • ここで説明されている History.js メソッドを使用します: https://github.com/browserstate/history.js/すべての手順を入力し、スクリプトをヘッダーに入力しますが、クリックすると URL バーの URL だけが変わります。リンク。[戻る] ボタンをクリックすると、それに応じて URl が変更されますが、コンテンツが読み込まれません。URL バーに URL を入力すると、ホームページに移動します。

  • ここで説明されている Ajaxify と Gist メソッド: https://github.com/browserstate/ajaxify上記と同じ、同じ問題も達成

  • ここで説明されている Davis.js メソッド: https://github.com/olivernn/davis.jsインストール手順の完了時に何も達成しません。変化なし。

  • ここで説明されている jQuery BBQ Plugin メソッド: http://benalman.com/projects/jquery-bbq-plugin/ Web サイトのヘッダーに .js ファイルをロードしても、何も達成されず、変更もありません。

  • この記事を読んで理解しました: http://diveintohtml5.info/history.html

4

2 に答える 2

0

戻るボタンは魔法のようには機能しません。イベントの変更をコーディングしてリッスンする必要があります。

history.jsでは、フロントページに表示されます。

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
});
于 2013-02-15T13:41:38.703 に答える
0

Davis.js を動作させられなかった理由がわかりませんか? おそらく、GitHub ページでイシューを開いてください。

Davis でハッシュ ベースのルーティングを使用する場合は、ハッシュ ルーティング拡張機能を含める必要があります。その後、デイビスの後にページに含める必要があります。

次の設定により、ルートを処理できるようになります

Davis.extend(Davis.hash)

Davis(function () {
    this.get('/:page', function (req) {
        FluidNav.goTo(req.params.page);
    })
})

ページに次のリンクがあると仮定します

<a href="#/page_1">Page1</a>
<a href="#/page_2">Page2</a>

Davis が [戻る] ボタンを処理してくれるので、Page1 のリンクをクリックしてから Page2 のリンクをクリックすると、[戻る] ボタンをクリックすると再び Page1 に移動します。

問題が発生した場合は、GitHub ページで問題を開いてください。何が問題で、何が機能していないかを詳しく説明してください。私はそれを確認できます。

于 2013-02-24T12:41:02.260 に答える