jQueryが読み込まれない

htmlファイルの共通部分を外部ファイル化し jQueryで読み込ませたい

webサイトを作っています。
htmlファイルの共通部分が多くなったため、外部ファイル化し一括で変更できるようにしたいと考えています。
header footerや、idをつけた要素をまるっと外部ファイルにまとめ、それらを統合するためにjQueryを使おうと考えています。

現在のコード

contents.htmlは以下のように書きました。

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="utf-8">
6    <title>CA Contents</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="../css/MainTest.css">
9    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
10    <link rel="stylesheet" href="../css/ResponsiveTest.css">
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
12
13    <script>
14      $(function(){
15        $("#headerContainer").load("/sharetest/headerContainer.html");
16      });
17    </script>
18  </head>
19
20
21  <body>
22    <div id="BodyContents">
23
24      <!--header-->
25      <header>
26        <div id="headerContainer">
27
28        </div>
29      </header>
30    </div>
31
32    <script src="../jQuery/scriptTestMQ.js"></script>
33  </body>
34</html>
35

head要素の最後に、sharetestフォルダ内に移動させたheaderContainer.htmlを読み込ませる命令を書いています。
最後の</body>の直前で読み込んでいるのは、webページを動かすことだけに特化したjQueryのファイルです。

headerContainer.html

html
1<div id="header-left">
2  <a href="FirstTestMQ.html"> <img src="../picture/CAlogo3.png" alt=""> </a>
3</div>
4
5<div id="header-right">
6  <div class="menu">
7    <a href="About.html">About</a>
8  </div>
9  <div class="menu">
10    <a href="ContentsTest.html">Contents</a>
11  </div>
12  <div class="menu">
13    <a href="contactTest.html">Contact</a>
14  </div>
15</div>

予定では、headerContainer.htmlが、contents.htmlの

html
1<header>
2    <div id="headerContainer">
3
4    </div>
5</header>

部分に読み込まれるはずなのですが、上手くいきません。

ディレクトリ構造

webpage
|
html css jQuery picture
|
sharetest contents.html
|
headerContainer.html

どうぞよろしくお願い申し上げます。

maisumakun

2020/03/18 06:53

コンソールにエラーなどメッセージは出ていませんか？

x_x

2020/03/18 07:16

上手くいかないというのは読み込まれないということですか？それとも scriptTestMQ.js が動かないということですか？

m.ts10806

2020/03/18 07:22

いっそPHPなどサーバーサイドの言語からテンプレートエンジン使っては…

plato

2020/03/18 08:50

意外とハイパーリロードやってみるといいかもしれません

AkitoshiManabe

2020/03/18 22:58

ディレクトリ構成は tree コマンドの結果をエディタなどで編集し、コードブロックで示したほうが伝わりやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

ディレクトリが違うのではないでしょうか

"/sharetest/headerContainer.html"　→　"sharetest/headerContainer.html"

投稿2020/04/15 07:08

na-01

総合スコア99

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！