質問: 自分はphpとhtmlとjQueryを使用して簡単なwebサイト作成の練習をしています。 動作環境はXAMPPを利用しています。 今回詰まっているのは共通部分として作成しているヘッダーのリンクについてです。 index.php A,B,Cそれぞれのindex.html 内に共通のheaderを表示しています。 記載コードは以下の通りです。 ``` ``` .load部分のパスはindex.htmlとindex.phpでディレクト構造上少し違います。 jQueryを使って各ページで共通のヘッダーを作りました。 ディレクトリ構造は添付画像のようになっています。XAMPP---htdocs以下に![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e9c374e08a83389332bbcca46311eb34.png)です。 共通のheaderとして以下のコードを書いています。 ``` A B C ``` index.php内の共通ヘッダーのリンクからはA,B,Cそれぞれのindex.htmlに遷移できました 画面表示URLはこうなります localhost/Mypage/A/ しかし、A->BやB->Cなどの遷移をするとURLがおかしくなってしまいます。 localhost/Mypage/A/B localhost/Mypage/B/C 調査内容としては 「htmlリンク」 「共通headerのリンク」 「共通header」 etc... などで検索したのですが欲しい情報は見つけられませんでした。 実装したい内容としては共通headerのある画面全てから自由にA、B、C画面に飛べるようにしたいです。 どこからとんでもURLがlocalhost/Mypage/Aのようになる状態。 お力添えお願いいたします。
回答: 相対パスでリンク先を記述しているためです。今回はheader.htmlに加えA、B、Cというフォルダに同じindex.htmlを置いており、そこに共通のhtmlタグが記述されていますが、リンク先のパスまで共通にしてしまっています。 なので、Aに遷移した時点ではhttp://localhost/Mypage/Aにいることになります。そこから遷移先がBとなるので、http://localhost/Mypage/A/Bへと移動していきます。 このようなトラブルを防ぐためには、全部を共通で絶対パスにしておくか、各フォルダ配下のindex.htmlに対し、パスを逐一書き換える必要があります。 **あと、なるべく同じファイル名は同一システム内で使わないほうが無難です。**