私がすることは少し違います。メニューのリンクを、コンテンツを指す有効なリンクにします。たとえばContacte
、http://www.foundcrelamps.com/contacte
そのリンクをブラウザに貼り付けると、ページが直接ロードされるように指定します。
次に、ユーザーがクリックするたびにページ全体をリロードしないように、ajax を保持します。
History.jsを使用してブラウザーの履歴を保持し、URL を変更して、ajax でも戻る/次へのボタンが機能するようにすることができます。
a
編集、標準で従来の要素を使用する場合、次のようにhref
なります。
$('a').click(function(){
$('YOUR CONTAINER').load($(this).attr('href'));
return false; // so that it does not load the whole page
});
次に、サーバーで次のようなことを行う必要があります。
/* AJAX check */
$isAjax = false;
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest') {
$isAjax = true;
}
if (!$isAjax) {
outputHeader();
}
outputMainContent();
if (!$isAjax) {
outputFooter();
}
このように ajax を実行すると、内部コンテンツのみが読み込まれます。そうでない場合は、ページ全体をロードします。
別の方法があります。ページ全体を jQuery でロードし、html の内部部分のみを使用して元のコンテンツを置き換えることができます。