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

質問編集履歴

3

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

2019/03/11 14:15

投稿

atsushi_m
atsushi_m

スコア20

title CHANGED
File without changes
body CHANGED
@@ -130,4 +130,48 @@
130
130
 
131
131
  利用しているjQueryのバージョンは1.10.2です。
132
132
  また、プラグインmixitupのサイトはこちらです。
133
- [https://www.kunkalabs.com/mixitup/](https://www.kunkalabs.com/mixitup/)
133
+ [https://www.kunkalabs.com/mixitup/](https://www.kunkalabs.com/mixitup/)
134
+
135
+
136
+
137
+ ### 【最終追記】
138
+ どなたかのお役に立つことがあるかもしれないので、修正後のjQueryを記載しておきます。
139
+
140
+ ```jQuery
141
+ $(function(){
142
+
143
+ $(window).on('load', function(){
144
+
145
+ var containerEl = document.querySelector('#gallery'),
146
+ mixer = mixitup(containerEl);
147
+
148
+ if(document.URL.match("#a")){
149
+ // URLにaが含まれる時
150
+ $(function(){
151
+ mixer;
152
+ mixer.filter('.a');
153
+ });
154
+
155
+ } else if(document.URL.match("#b")) {
156
+ // URLにbが含まれる時
157
+ $(function(){
158
+ mixer;
159
+ mixer.filter('.b');
160
+ });
161
+
162
+ } else if(document.URL.match("#c")) {
163
+ // URLにcが含まれる時
164
+ $(function(){
165
+ mixer;
166
+ mixer.filter('.c');
167
+ });
168
+
169
+ } else {
170
+ $(function(){
171
+ mixer;
172
+ });
173
+ }
174
+ });
175
+
176
+ });
177
+ ```

2

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

2019/03/11 14:15

投稿

atsushi_m
atsushi_m

スコア20

title CHANGED
File without changes
body CHANGED
@@ -25,8 +25,12 @@
25
25
  引き続きどうぞよろしくお願いいたします。
26
26
 
27
27
 
28
+ **【さらに追記】**
29
+ Bページの「a」「b」「c」へのリンク部分のHTMLを記載しておりませんでしたので、改めて追記しました。
30
+
31
+
28
32
  ### 該当のソースコード
29
-
33
+ ↓mixitup_option.js
30
34
  ```jQuery
31
35
  $(window).on('load', function(){
32
36
 
@@ -77,6 +81,7 @@
77
81
  });
78
82
  ```
79
83
 
84
+ ↓AページHTML
80
85
  ```HTML
81
86
  <html dir="ltr" lang="ja">
82
87
  <head>
@@ -105,6 +110,22 @@
105
110
  </html>
106
111
  ```
107
112
 
113
+ ↓Bページの「a」「b」「c」へのリンク部分
114
+ ```HTML
115
+ <nav>
116
+ <ul class="menu">
117
+ <li><a href="../A.html">A</a></li>
118
+ <ul>
119
+ <li><a href="../A.html#a">a</a></li>
120
+ <li><a href="../A.html#b">b</a></li>
121
+ <li><a href="../A.html#c">c</a></li>
122
+ </ul>
123
+ <li><a href="#">B</a></li>
124
+ <li><a href="#">C</a></li>
125
+ </ul>
126
+ </nav>
127
+ ```
128
+
108
129
  ### 補足情報(FW/ツールのバージョンなど)
109
130
 
110
131
  利用しているjQueryのバージョンは1.10.2です。

1

HTMLを追記いたしました

2019/03/10 15:58

投稿

atsushi_m
atsushi_m

スコア20

title CHANGED
File without changes
body CHANGED
@@ -20,6 +20,11 @@
20
20
 
21
21
 
22
22
 
23
+ **【追記】**
24
+ アドバイスいただきました通り、当該HTMLを加えました。簡略化しておりますが、こういった具合です。また、記載したjQueryはHTMLの下部で読み込んでおります「mixitup_option.js」というファイルです。
25
+ 引き続きどうぞよろしくお願いいたします。
26
+
27
+
23
28
  ### 該当のソースコード
24
29
 
25
30
  ```jQuery
@@ -72,6 +77,33 @@
72
77
  });
73
78
  ```
74
79
 
80
+ ```HTML
81
+ <html dir="ltr" lang="ja">
82
+ <head>
83
+ <meta charset="UTF-8">
84
+ <title>無題ドキュメント</title>
85
+ <link rel="stylesheet" href="../css/reset.css" type="text/css" />
86
+ <link rel="stylesheet" href="../css/style.css" type="text/css" />
87
+ </head>
88
+ <body>
89
+ <div class="wrapper">
90
+ <section id="category">
91
+ <div id="gallery">
92
+ <div class="mix a">a</div>
93
+ <div class="mix b">b</div>
94
+ <div class="mix c">c</div>
95
+ <div class="mix a">a</div>
96
+ <div class="mix b">b</div>
97
+ <div class="mix c">c</div>
98
+ </div>
99
+ </section>
100
+ </div>
101
+ </body>
102
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
103
+ <script src="../js/mixitup.js"></script>
104
+ <script src="../js/mixitup_option.js"></script>
105
+ </html>
106
+ ```
75
107
 
76
108
  ### 補足情報(FW/ツールのバージョンなど)
77
109