0

だから私はしばらく検索しましたが、答えを見つけたと思いますが、それをどのように適用するか正確にはわかりません。

私の問題は次のとおりです。メニューのある Web サイト (サイトは PHP と HTML5 でコーディングされています) があり、各メニュー項目は別のページにリンクしています。ページの仕組みは次のとおりです。

http://domainhere/index.php#home
http://domainhere/index.php#about
http://domainhere/index.php#contact

など...

ユーザーが about ページに直接リンクしたい場合、 index.php#home ページが読み込まれるため、現時点では Web ページは理想的ではありません。私が欲しいのは、ドキュメントがアドレスをロードするときに、ハッシュタグの後の値を読み取り、作成した #content div コンテナー内に適切なコンテンツをロードできる機能です。今のところ、アニメーションと show()/hide() を使用して各ページの div を非表示にする jQuery 関数があります。さらに、私のホームページは他のページとはフォーマットが異なり、ヘッダーのサイズを小さくするためにアニメーションが必要です。私はこれを読み、多くのソリューションが AJAX を思い付きましたが、これをどのように適用できるかはわかりません。スターターのヘッズアップは素晴らしいことです。私は研ぎ澄まされ続けます!

ありがとう

4

2 に答える 2

0

ハッシュタグを読み取ってそれに応答するための私のソリューションは、jQuery を使用して次のとおりです。

私が使用する jQuery プラグイン: jquery.ba-hashchange.min.js、次の場所にあります: http://benalman.com/projects/jquery-hashchange-plugin/

ページの読み込み時とハッシュの変更時にハッシュ変更機能が発生するように設定します。したがって、メニュー クリックから表示/非表示関数を呼び出す代わりに、それらをハッシュ変更関数に入れるだけで、ページの読み込みとメニュー選択の両方を処理できます。メニュー リンクは、ハッシュの変更のみに関係する必要があります。

また、サイト全体を一度に読み込むのではなく、最終的に AJAX を使用してページ コンテンツを個別に読み込むように切り替えると、スイッチの関数呼び出しで ajax 呼び出しを実行して特定のコンテンツを返すことができます。または、ハッシュタグを一般的な ajax 呼び出しに渡すことができ、ajax Web メソッド/サービス呼び出しは、渡されたハッシュタグに基づいて返すコンテンツを決定できます。

$(function () {
    $(window).hashchange(function () {
        var hash = location.hash;

        //This part here untested - you'll need to write it custom for your menu.
        switch (hash){
          case "#about":
              ShowAboutDiv(); 
              //this should be the function you already call to show the about div.
              break;
          case "#contact":
              ShowContactDiv();
              break;
          default :
              //show home div, or maybe it already shows.
              break;
        };
    });


    //handle page load hash...
    $(window).hashchange();
});
于 2012-05-31T16:39:07.100 に答える
0

私があなたの質問を正しく理解していれば、次のようなことができます。

$(document).ready(function(){
   var target = location.hash;

   // Code to hide all section

   // Show the section/div whose is placed on url
   $(target).show('fast');

});
于 2012-05-31T16:30:54.493 に答える