teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

指摘点の修正

2018/01/14 08:11

投稿

tarofess
tarofess

スコア127

title CHANGED
File without changes
body CHANGED
@@ -112,4 +112,80 @@
112
112
  </div>
113
113
  </div>
114
114
 
115
- ```
115
+ ```
116
+
117
+ //////////////////追記/////////////////////
118
+
119
+ コードの指摘を受けて、ファイル内でタグを閉じるように以下のようにコードを変更しました。
120
+
121
+ index.php
122
+ ```html
123
+ <body>
124
+ <?php include_once('header.html'); ?>
125
+ <?php include('categories.php'); ?>
126
+ <?php include_once('footer.html'); ?>
127
+ ```
128
+ categories.php
129
+ ```html
130
+ <div class="container">
131
+ <div class="row" style="padding:20px 0 0 0">
132
+ <div class="col-md-3">
133
+ <div class="panel panel-success" id="test">
134
+ <div class="panel-heading">
135
+ カテゴリ
136
+ </div>
137
+ <ul class="nav nav-pills nav-stacked" id="categories">
138
+ <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li>
139
+ <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li>
140
+ <li id="total_ranking_panel"><a href=""><i class="glyphicon glyphicon-pencil"></i> 全体ランキング</a></li>
141
+ <li id="week_ranking_panel"><a href=""><i class="glyphicon glyphicon-download"></i> 週間ランキング</a></li>
142
+ <li id="month_ranking_panel"><a href=""><i class="glyphicon glyphicon-leaf"></i> 月間ランキング</a></li>
143
+ </ul>
144
+ </div>
145
+ </div>
146
+ <div class="col-md-9">
147
+ <div id="sub">
148
+ <?php include('new.php'); ?>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ ```
154
+ new.php
155
+ ```html
156
+ <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
157
+ <h1><small>新着順</small></h1>
158
+ </div>
159
+ <div class="col-md-4">
160
+ <div class="thumbnail" style="text-align:center;padding-top:10px;">
161
+ <a href="">
162
+ <img src="150x150.jpg">
163
+ </a>
164
+ <div class="caption">
165
+ <p><b>Caption</b></p>
166
+ <p>this is a caption.</p>
167
+ <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ ```
172
+ stock.php
173
+ ```html
174
+ <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
175
+ <h1><small>ストック順</small></h1>
176
+ </div>
177
+ <div class="col-md-4">
178
+ <div class="thumbnail" style="text-align:center;padding-top:10px;">
179
+ <a href="">
180
+ <img src="150x150.jpg">
181
+ </a>
182
+ <div class="caption">
183
+ <p><b>Caption</b></p>
184
+ <p>this is a caption.</p>
185
+ <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ ```
190
+ すると、パネルをクリックするとstock.phpの「ストック順」という文言が画面に一瞬だけ表示されるのですが、その一瞬後にまたnew.phpの「新着順」という文言に戻ってしまいます。
191
+ 一瞬だけstock.phpがロードできているような挙動なのですが、呼び出し方が間違っているのでしょうか?

1

コードの追記

2018/01/14 08:11

投稿

tarofess
tarofess

スコア127

title CHANGED
File without changes
body CHANGED
@@ -12,4 +12,104 @@
12
12
  $('#sub').load('stock.php');
13
13
  ```
14
14
  これでページが差しかわると思っていたのですが、ページは変わりませんでした。
15
- どこが間違っているのでしょうか?どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。
15
+ どこが間違っているのでしょうか?どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。
16
+
17
+
18
+ //////////////////追記/////////////////////
19
+
20
+ 詳細なコードを追記します。
21
+ まずサイトに訪れた時に表示されるページは以下のようになっています。
22
+
23
+ ```html
24
+ <body>
25
+ <?php include_once('header.html'); ?>
26
+ <?php include('categories.html'); ?>
27
+ <div id="sub">
28
+ <?php include('new.php'); ?>
29
+ </div>
30
+ <?php include_once('footer.html'); ?>
31
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
32
+ <script src="js/bootstrap.min.js"></script>
33
+ <script>
34
+ $(function(){
35
+ $('#categories li').click(function() {
36
+ switch ($(this).index()) {
37
+ case 0:
38
+
39
+ break;
40
+ case 1:
41
+ $('#sub').load('stock.php');
42
+ break;
43
+ default:
44
+ break;
45
+ }
46
+ });
47
+ });
48
+ </script>
49
+ </body>
50
+ ```
51
+ サイトの画面左側にはBootstrapのパネルが表示されており、コードは以下のようになっています。
52
+ このパネルの項目がクリックされると画面の一部を差しかえたいです。
53
+
54
+ categories.html
55
+ ```html
56
+ <div class="container">
57
+ <div class="row" style="padding:20px 0 0 0">
58
+ <div class="col-md-3">
59
+ <div class="panel panel-success" id="test">
60
+ <div class="panel-heading">
61
+ カテゴリ
62
+ </div>
63
+ <ul class="nav nav-pills nav-stacked" id="categories">
64
+ <li id="new_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> 新着順</a></li>
65
+ <li id="stock_panel"><a href=""><i class="glyphicon glyphicon-folder-open"></i> ストック順</a></li>
66
+ </ul>
67
+ </div>
68
+ </div>
69
+ ```
70
+ そしてこちらのコードが最初から画面に表示されているnew.phpのコードです。
71
+ ```php
72
+ <div class="col-md-9">
73
+ <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
74
+ <h1><small>新着順</small></h1>
75
+ </div>
76
+ <div class="col-md-4">
77
+ <div class="thumbnail" style="text-align:center;padding-top:10px;">
78
+ <a href="">
79
+ <img src="150x150.jpg">
80
+ </a>
81
+ <div class="caption">
82
+ <p><b>Caption</b></p>
83
+ <p>this is a caption.</p>
84
+ <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ ```
93
+ そしてこちらがパネルが押されたら表示させようとしているstock.phpのコードです。
94
+ ```html
95
+ <div class="col-md-9">
96
+ <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
97
+ <h1><small>ストック順</small></h1>
98
+ </div>
99
+ <div class="col-md-4">
100
+ <div class="thumbnail" style="text-align:center;padding-top:10px;">
101
+ <a href="">
102
+ <img src="150x150.jpg">
103
+ </a>
104
+ <div class="caption">
105
+ <p><b>Caption</b></p>
106
+ <p>this is a caption.</p>
107
+ <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ ```