質問編集履歴
1
htmlを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
外部html(201～223.html)に、料金表（room-type/service-room.html、room-type/economy-room.html等、全部で7タイプ）を表示していたのですが、単独では表示出来ていたのですが、外部から読み込むようにすると、表示されなくなってしまいました。
|
|
3
3
|
|
|
4
4
|
料金表の読み込みは、以下のようなプログラムです。
|
|
5
|
+
|
|
5
|
-
|
|
6
|
+
```jquery
|
|
6
7
|
$(function(){
|
|
7
8
|
$.ajaxSetup({cache:false});
|
|
8
9
|
$("#service-room").load("ホームページのURL/room-type/service-room.html");
|
|
@@ -13,10 +14,11 @@
|
|
|
13
14
|
$("#sweet-room").load("ホームページのURL/room-type/sweet-room.html");
|
|
14
15
|
$("#open-air-sweet-room").load("ホームページのURL/room-type/open-air-sweet-room.html");
|
|
15
16
|
});
|
|
16
|
-
|
|
17
|
+
```
|
|
17
18
|
|
|
18
19
|
トップページに、201～223.htmlを表示するのは、全部書くと長いので一部ですが、以下のプログラムです。
|
|
20
|
+
|
|
19
|
-
|
|
21
|
+
```jquery
|
|
20
22
|
var all_link=new Array(),
|
|
21
23
|
links = $('.room-list').find('li'),
|
|
22
24
|
|
|
@@ -25,9 +27,136 @@
|
|
|
25
27
|
box_load.append('<li class="load_'+i+'"></li>');
|
|
26
28
|
$('.load_'+i).load(all_link[i]);
|
|
27
29
|
}
|
|
28
|
-
、、、、、、、、、、
|
|
29
30
|
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
アドバイスありがとうございます。質問修正します。
|
|
34
|
+
トップページのhtmlは以下のようになっております。
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<ul class="room-list">
|
|
38
|
+
<li><img src="images/room201_02_s.jpg" alt="201"><span>201</span></li>
|
|
39
|
+
<li><img src="images/room202_01_s.jpg" alt="202"><span>202</span></a></li>
|
|
40
|
+
<li><img src="images/room203_01_s.jpg" alt="203"><span>203</span></a></li>
|
|
41
|
+
<li><img src="images/room204_01_s.jpg" alt="204"><span>204</span></a></li>
|
|
42
|
+
<li><img src="images/room205_01_s.jpg" alt="205"><span>205</span></a></li>
|
|
43
|
+
<li><img src="images/room206_01_s.jpg" alt="206"><span>206</span></a></li>
|
|
44
|
+
<li><img src="images/room207_01_s.jpg" alt="207"><span>207</span></a></li>
|
|
45
|
+
<li><img src="images/room208_01_s.jpg" alt="208"><span>208</span></a></li>
|
|
46
|
+
<li><img src="images/room209_01_s.jpg" alt="209"><span>209</span></a></li>
|
|
47
|
+
<li><img src="images/room210_01_s.jpg" alt="210"><span>210</span></a></li>
|
|
48
|
+
<li><img src="images/room211_01_s.jpg" alt="211"><span>211</span></a></li>
|
|
49
|
+
<li><img src="images/room212_01_s.jpg" alt="212"><span>212</span></a></li>
|
|
50
|
+
<li><img src="images/room213_01_s.jpg" alt="213"><span>213</span></a></li>
|
|
51
|
+
<li><img src="images/room214_01_s.jpg" alt="214"><span>214</span></a></li>
|
|
52
|
+
<li><img src="images/room215_01_s.jpg" alt="215"><span>215</span></a></li>
|
|
53
|
+
<li><img src="images/room216_02_s.jpg" alt="216"><span>216</span></a></li>
|
|
54
|
+
<li><img src="images/room217_01_s.jpg" alt="217"><span>217</span></a></li>
|
|
55
|
+
<li><img src="images/room218_01_s.jpg" alt="218"><span>218</span></a></li>
|
|
56
|
+
<li><img src="images/room219_01_s.jpg" alt="219"><span>219</span></a></li>
|
|
57
|
+
<li><img src="images/room220_01_s.jpg" alt="220"><span>220</span></a></li>
|
|
58
|
+
<li><img src="images/room221_02_s.jpg" alt="221"><span>221</span></a></li>
|
|
59
|
+
<li><img src="images/room222_01_s.jpg" alt="222"><span>222</span></a></li>
|
|
60
|
+
<li><img src="images/room223_01_s.jpg" alt="223"><span>223</span></a></li>
|
|
61
|
+
</ul>
|
|
62
|
+
<div class="box">
|
|
63
|
+
<div class="box_inner">
|
|
64
|
+
<ul class="box_load">
|
|
65
|
+
<!-- ↓ここに.load_xxが入る -->
|
|
66
|
+
</ul>
|
|
67
|
+
|
|
68
|
+
<div class="close">× CLOSE</div>
|
|
69
|
+
|
|
70
|
+
<ul class="arrows">
|
|
71
|
+
<li class="arrow_left"><span class="arrow_span"><i class="fas fa-chevron-left"></i></span></li>
|
|
72
|
+
<li class="arrow_right"><span class="arrow_span"><i class="fas fa-chevron-right"></i></span></li>
|
|
73
|
+
</ul>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="box_cover"></div>
|
|
77
|
+
```
|
|
78
|
+
201～203.htmlは以下で、料金によって<div id="standard-room">の部分のIDを変えています。
|
|
79
|
+
```html
|
|
80
|
+
<div class="room-type-wrap">
|
|
81
|
+
<h3 class="room-type">201 スタンダード</h3>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="room-info-wrap responsive-wrap">
|
|
85
|
+
<div><img src="ホームページのURL/images/room201_01.jpg" alt="お部屋写真01"></div>
|
|
86
|
+
<div><img src="ホームページのURL/images/room201_02.jpg" alt="お部屋写真02"></div>
|
|
87
|
+
<div><img src="ホームページのURL/images/room201_03.jpg" alt="お部屋写真03"></div>
|
|
88
|
+
|
|
89
|
+
<div class="price-room-info-list">
|
|
90
|
+
<div id="standard-room">
|
|
91
|
+
<!-- standard-room.htmlが入る -->
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<p class="room-facilities">ここは部屋の設備が入ります</p>
|
|
95
|
+
|
|
96
|
+
</div><!--price-room-info-list -->
|
|
97
|
+
|
|
98
|
+
</div><!-- room-info-wrap -->
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
料金表は以下のhtmlです
|
|
102
|
+
```html
|
|
103
|
+
<h4>ショートタイム</h4>
|
|
104
|
+
<ul>
|
|
105
|
+
<li>月～金曜日・祝前日</li>
|
|
106
|
+
<li>￥4,580</li>
|
|
107
|
+
</ul>
|
|
108
|
+
<ul>
|
|
109
|
+
<li>土・日・祝日</li>
|
|
110
|
+
<li>￥5,480</li>
|
|
111
|
+
</ul>
|
|
112
|
+
|
|
113
|
+
<h4>ご休憩</h4>
|
|
114
|
+
<ul>
|
|
115
|
+
<li>月～金・祝前日</li>
|
|
116
|
+
<li>￥5,000</li>
|
|
117
|
+
</ul>
|
|
118
|
+
<ul>
|
|
119
|
+
<li>土・日・祝日</li>
|
|
120
|
+
<li>￥5,700</li>
|
|
121
|
+
</ul>
|
|
122
|
+
|
|
123
|
+
<h4>サービスタイム</h4>
|
|
124
|
+
<ul>
|
|
125
|
+
<li>月～金・祝前日</li>
|
|
126
|
+
<li>￥5,000</li>
|
|
127
|
+
</ul>
|
|
128
|
+
<ul>
|
|
129
|
+
<li>土・日・祝日</li>
|
|
130
|
+
<li>￥5,700</li>
|
|
131
|
+
</ul>
|
|
132
|
+
|
|
133
|
+
<h4>ご宿泊</h4>
|
|
134
|
+
<ul>
|
|
135
|
+
<li>日～金・祝日</li>
|
|
136
|
+
<li>￥7,500</li>
|
|
137
|
+
</ul>
|
|
138
|
+
<ul>
|
|
139
|
+
<li>土・祝前日</li>
|
|
140
|
+
<li>￥10,000</li>
|
|
141
|
+
</ul>
|
|
142
|
+
|
|
143
|
+
<h4>ご延長</h4>
|
|
144
|
+
<ul>
|
|
145
|
+
<li>全日</li>
|
|
146
|
+
<li>￥1,800</li>
|
|
147
|
+
</ul>
|
|
148
|
+
```
|
|
149
|
+
|
|
30
150
|
201～223.htmlは、index.htmlと同じ階層に「room」フォルダを作って、その中に入れています。
|
|
151
|
+
料金表は「room-type」のフォルダに入れています。
|
|
31
152
|
トップページにも同じ料金表があって、そちらは表示されているので、動いてはいると思うのですが…。。。。
|
|
32
153
|
|
|
154
|
+
今回の料金表や、ヘッダーもこの方法でインクルードしていますが、あまり良くないでしょうか？？
|
|
155
|
+
この方法でよいのか、SEOはどうなのか、ネットではいまいちわからず、詳しい人も周りにおらず、みんな共通部分の読み込みはどうしているのだろうと、色々悩みながら作っております。
|
|
156
|
+
できれば、metaタグなど<head></head>の部分もひとつで済むようにしたいのですが、今のやり方では無理そうです。
|
|
157
|
+
|
|
158
|
+
他に何か良い方法があれば、ご教示頂けましたら幸いです。
|
|
159
|
+
|
|
160
|
+
ソースコードの書き方知らなかったので、この点は何だろう。と思いつつ「、、、」と手入力していました。すみません。
|
|
161
|
+
|
|
33
162
|
よろしくお願いいたします。
|