teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ページ遷移後にjQueryを実行したい

編集履歴

質問編集履歴

3

修正後のコードを掲載します

2019/03/11 14:15

投稿

atsushi_m
atsushi_m

スコア20

test CHANGED
File without changes
test CHANGED
@@ -263,3 +263,91 @@
263
263
  また、プラグインmixitupのサイトはこちらです。
264
264
 
265
265
  [https://www.kunkalabs.com/mixitup/](https://www.kunkalabs.com/mixitup/)
266
+
267
+
268
+
269
+
270
+
271
+
272
+
273
+ ### 【最終追記】
274
+
275
+ どなたかのお役に立つことがあるかもしれないので、修正後のjQueryを記載しておきます。
276
+
277
+
278
+
279
+ ```jQuery
280
+
281
+ $(function(){
282
+
283
+
284
+
285
+ $(window).on('load', function(){
286
+
287
+
288
+
289
+ var containerEl = document.querySelector('#gallery'),
290
+
291
+ mixer = mixitup(containerEl);
292
+
293
+
294
+
295
+ if(document.URL.match("#a")){
296
+
297
+ // URLにaが含まれる時
298
+
299
+ $(function(){
300
+
301
+ mixer;
302
+
303
+ mixer.filter('.a');
304
+
305
+ });
306
+
307
+
308
+
309
+ } else if(document.URL.match("#b")) {
310
+
311
+ // URLにbが含まれる時
312
+
313
+ $(function(){
314
+
315
+ mixer;
316
+
317
+ mixer.filter('.b');
318
+
319
+ });
320
+
321
+
322
+
323
+ } else if(document.URL.match("#c")) {
324
+
325
+ // URLにcが含まれる時
326
+
327
+ $(function(){
328
+
329
+ mixer;
330
+
331
+ mixer.filter('.c');
332
+
333
+ });
334
+
335
+
336
+
337
+ } else {
338
+
339
+ $(function(){
340
+
341
+ mixer;
342
+
343
+ });
344
+
345
+ }
346
+
347
+ });
348
+
349
+
350
+
351
+ });
352
+
353
+ ```

2

HTMLを再度追記いたしました

2019/03/11 14:15

投稿

atsushi_m
atsushi_m

スコア20

test CHANGED
File without changes
test CHANGED
@@ -52,9 +52,17 @@
52
52
 
53
53
 
54
54
 
55
+ **【さらに追記】**
56
+
57
+ Bページの「a」「b」「c」へのリンク部分のHTMLを記載しておりませんでしたので、改めて追記しました。
58
+
59
+
60
+
61
+
62
+
55
63
  ### 該当のソースコード
56
64
 
57
-
65
+ ↓mixitup_option.js
58
66
 
59
67
  ```jQuery
60
68
 
@@ -156,6 +164,8 @@
156
164
 
157
165
 
158
166
 
167
+ ↓AページHTML
168
+
159
169
  ```HTML
160
170
 
161
171
  <html dir="ltr" lang="ja">
@@ -212,6 +222,38 @@
212
222
 
213
223
 
214
224
 
225
+ ↓Bページの「a」「b」「c」へのリンク部分
226
+
227
+ ```HTML
228
+
229
+ <nav>
230
+
231
+ <ul class="menu">
232
+
233
+ <li><a href="../A.html">A</a></li>
234
+
235
+ <ul>
236
+
237
+ <li><a href="../A.html#a">a</a></li>
238
+
239
+ <li><a href="../A.html#b">b</a></li>
240
+
241
+ <li><a href="../A.html#c">c</a></li>
242
+
243
+ </ul>
244
+
245
+ <li><a href="#">B</a></li>
246
+
247
+ <li><a href="#">C</a></li>
248
+
249
+ </ul>
250
+
251
+ </nav>
252
+
253
+ ```
254
+
255
+
256
+
215
257
  ### 補足情報（FW/ツールのバージョンなど）
216
258
 
217
259
 

1

HTMLを追記いたしました

2019/03/10 15:58

投稿

atsushi_m
atsushi_m

スコア20

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,16 @@
42
42
 
43
43
 
44
44
 
45
+ **【追記】**
46
+
47
+ アドバイスいただきました通り、当該HTMLを加えました。簡略化しておりますが、こういった具合です。また、記載したjQueryはHTMLの下部で読み込んでおります「mixitup_option.js」というファイルです。
48
+
49
+ 引き続きどうぞよろしくお願いいたします。
50
+
51
+
52
+
53
+
54
+
45
55
  ### 該当のソースコード
46
56
 
47
57
 
@@ -146,6 +156,60 @@
146
156
 
147
157
 
148
158
 
159
+ ```HTML
160
+
161
+ <html dir="ltr" lang="ja">
162
+
163
+ <head>
164
+
165
+ <meta charset="UTF-8">
166
+
167
+ <title>無題ドキュメント</title>
168
+
169
+ <link rel="stylesheet" href="../css/reset.css" type="text/css" />
170
+
171
+ <link rel="stylesheet" href="../css/style.css" type="text/css" />
172
+
173
+ </head>
174
+
175
+ <body>
176
+
177
+ <div class="wrapper">
178
+
179
+ <section id="category">
180
+
181
+ <div id="gallery">
182
+
183
+ <div class="mix a">a</div>
184
+
185
+ <div class="mix b">b</div>
186
+
187
+ <div class="mix c">c</div>
188
+
189
+ <div class="mix a">a</div>
190
+
191
+ <div class="mix b">b</div>
192
+
193
+ <div class="mix c">c</div>
194
+
195
+ </div>
196
+
197
+ </section>
198
+
199
+ </div>
200
+
201
+ </body>
202
+
203
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
204
+
205
+ <script src="../js/mixitup.js"></script>
206
+
207
+ <script src="../js/mixitup_option.js"></script>
208
+
209
+ </html>
210
+
211
+ ```
212
+
149
213
 
150
214
 
151
215
  ### 補足情報（FW/ツールのバージョンなど）