1

私が持っているもの: 次のスクリプトを使用してページを表示する Web サイト:

var FluidNav = {
    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+']');
        $("nav ul li").removeClass("current");
        nav_item.parent().addClass("current");
        FluidNav.resizePage((next_page.height() + 40), true, function() {
             $(".page").removeClass("current"); next_page.addClass("current"); 
        });
        $(".page").fadeOut(500);
        next_page.fadeIn(500);

リンクをクリックしても、URL バーの URL は変化しませんが、コンテンツは表示されます。ブラウザの [戻る] ボタンを使用する方法はありません。内リンクは#hashタグ付きです。例: abc.com/#home, abc.com/#services. ただし、abc.com/#servicesURL バーに入力すると、そのページにリダイレクトされ#homeます。

私が達成したいこと: リンクをクリックすると、URL が変更され、ブラウザがそれを履歴に記録します。戻るボタンを押すと、前にいたページのコンテンツを生成するサイト。新しいタブを開いて入力すると、ホームページではなくページabc.com/#servicesに送信されます#services

私が試し たこと これらは私が読んだリソースと私が試した解決策です:

  • ここで説明されている 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

0 に答える 0