teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQueryでクリック表示・非表示の動作がならない。

編集履歴

質問編集履歴

3

原稿修正

2018/06/21 05:40

投稿

kitikiti
kitikiti

スコア17

test CHANGED
File without changes
test CHANGED
@@ -8,12 +8,14 @@
8
8
 
9
9
  2回クリック後も維持したい場合はどのように記述すればいいでしょうか。
10
10
 
11
- jQuery
11
+
12
-
12
+
13
- ```ここに言語を入力
13
+ ```JS
14
14
 
15
15
  $(function(){
16
16
 
17
+
18
+
17
19
  $("#photo_gallery .tab li").click(function() {
18
20
 
19
21
  var tags = $(this).attr('class');
@@ -82,13 +84,13 @@
82
84
 
83
85
  </script>
84
86
 
87
+
88
+
85
89
  ```
86
90
 
87
91
 
88
92
 
89
- CSS
93
+ ```CSS
90
-
91
- ```ここに言語を入力
92
94
 
93
95
  div#photo_gallery {
94
96
 
@@ -182,9 +184,9 @@
182
184
 
183
185
 
184
186
 
185
- html
187
+
186
-
188
+
187
- ```ここに言語を入力
189
+ ```HTML
188
190
 
189
191
  <div id="photo_gallery" class="clearfix">
190
192
 

2

コード修正

2018/06/21 05:40

投稿

kitikiti
kitikiti

スコア17

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
  2回クリック後も維持したい場合はどのように記述すればいいでしょうか。
10
10
 
11
-
11
+ jQuery
12
-
12
+
13
- <script>
13
+ ```ここに言語を入力
14
14
 
15
15
  $(function(){
16
16
 
@@ -82,6 +82,110 @@
82
82
 
83
83
  </script>
84
84
 
85
+ ```
86
+
87
+
88
+
89
+ CSS
90
+
91
+ ```ここに言語を入力
92
+
93
+ div#photo_gallery {
94
+
95
+ clear: both;
96
+
97
+ overflow: hidden;
98
+
99
+ }
100
+
101
+ div#photo_gallery .btn_detail {
102
+
103
+ background: #fff;
104
+
105
+ padding: 20px;
106
+
107
+ margin: 30px 0;
108
+
109
+ text-align: center;
110
+
111
+ border: 1px solid #fff;
112
+
113
+ color: #e79c37;
114
+
115
+ }
116
+
117
+ div#photo_gallery ul.tab {
118
+
119
+ padding: 15px;
120
+
121
+ text-align:center;
122
+
123
+ overflow: hidden;
124
+
125
+ 　　background: #fdb95e;
126
+
127
+ }
128
+
129
+ div#photo_gallery ul.tab li {
130
+
131
+ color: #000;
132
+
133
+ margin: 0;
134
+
135
+ float: left;
136
+
137
+ letter-spacing: 1;
138
+
139
+ padding: 5px 45px;
140
+
141
+ cursor: pointer;
142
+
143
+ }
144
+
145
+ div#photo_gallery ul.tab li.active {
146
+
147
+ background: #cc7500;
148
+
149
+ color: #fff;
150
+
151
+ }
152
+
153
+ div#photo_gallerys {
154
+
155
+ }
156
+
157
+ div#photo_gallerys ul.photo_s {
158
+
159
+ margin: 10px 0 0px;
160
+
161
+ overflow: hidden;
162
+
163
+ }
164
+
165
+ div#photo_gallerys ul.photo_s li {
166
+
167
+ float: left;
168
+
169
+ width: 24%;
170
+
171
+ margin: 0 4px 12px;
172
+
173
+ }
174
+
175
+ div#photo_gallerys ul.photo_s li img {
176
+
177
+ width: 100%;
178
+
179
+ }
180
+
181
+ ```
182
+
183
+
184
+
185
+ html
186
+
187
+ ```ここに言語を入力
188
+
85
189
  <div id="photo_gallery" class="clearfix">
86
190
 
87
191
  <ul class="tab">
@@ -124,94 +228,8 @@
124
228
 
125
229
  </ul>
126
230
 
127
-
128
-
129
- 下記がCSSになります。
130
-
131
- div#photo_gallery {
132
-
133
- clear: both;
134
-
135
- overflow: hidden;
136
-
137
- }
138
-
139
- div#photo_gallery .btn_detail {
140
-
141
- background: #fff;
142
-
143
- padding: 20px;
144
-
145
- margin: 30px 0;
146
-
147
- text-align: center;
148
-
149
- border: 1px solid #fff;
150
-
151
- color: #e79c37;
152
-
153
- }
154
-
155
- div#photo_gallery ul.tab {
156
-
157
- padding: 15px;
158
-
159
- text-align:center;
160
-
161
- overflow: hidden;
162
-
163
- 　　background: #fdb95e;
164
-
165
- }
166
-
167
- div#photo_gallery ul.tab li {
168
-
169
- color: #000;
170
-
171
- margin: 0;
172
-
173
- float: left;
174
-
175
- letter-spacing: 1;
231
+ </div>
176
-
177
- padding: 5px 45px;
232
+
178
-
179
- cursor: pointer;
180
-
181
- }
182
-
183
- div#photo_gallery ul.tab li.active {
184
-
185
- background: #cc7500;
186
-
187
- color: #fff;
188
-
189
- }
190
-
191
- div#photo_gallerys {
192
-
193
- }
194
-
195
- div#photo_gallerys ul.photo_s {
196
-
197
- margin: 10px 0 0px;
198
-
199
- overflow: hidden;
233
+ </div>
200
-
234
+
201
- }
235
+ ```
202
-
203
- div#photo_gallerys ul.photo_s li {
204
-
205
- float: left;
206
-
207
- width: 24%;
208
-
209
- margin: 0 4px 12px;
210
-
211
- }
212
-
213
- div#photo_gallerys ul.photo_s li img {
214
-
215
- width: 100%;
216
-
217
- }

1

CSSを追加しました。

2018/06/21 05:24

投稿

kitikiti
kitikiti

スコア17

test CHANGED
File without changes
test CHANGED
@@ -82,76 +82,136 @@
82
82
 
83
83
  </script>
84
84
 
85
-
86
-
87
-
88
-
89
-
90
-
91
- <div id="photo_gallery" class="clearfix">
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
- <ul class="tab">
100
-
101
- <li class="practice_scenery_ select">＃練習風景</li>
102
-
103
- <li class="20180620_">＃20180620</li>
104
-
105
- <li class="off-shot_">＃オフショット</li>
106
-
107
- <li class="match_scenery_">＃試合風景</li>
108
-
109
-
110
-
111
- </ul>
112
-
113
-
114
-
115
- <div id="photo_gallerys" class="clearfix">
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
- <ul class="photo_title">
124
-
125
- <li class="practice_scenery">＃練習風景</li>
126
-
127
- <li class="20180620">＃20180620</li>
128
-
129
- <li class="off-shot">＃オフショット</li>
130
-
131
- <li class="match_scenery">＃試合風景</li>
132
-
133
- </ul>
134
-
135
-
136
-
137
- <!-- フォト抜き出し-->
138
-
139
-
140
-
141
-
142
-
143
- <ul class="photo photo_s">
144
-
145
- <li class="practice_scenery">2018.06.18</li>
146
-
147
-
148
-
149
- <li class="20180620">2018.06.18</li>
150
-
151
-
152
-
153
- <li class="off-shot">2018.06.18</li>
154
-
155
-
156
-
157
- <li class="off-shot">2018.06.18</li></ul>
85
+ <div id="photo_gallery" class="clearfix">
86
+
87
+ <ul class="tab">
88
+
89
+ <li class="practice_scenery_ select">＃練習風景</li>
90
+
91
+ <li class="20180620_">＃20180620</li>
92
+
93
+ <li class="off-shot_">＃オフショット</li>
94
+
95
+ <li class="match_scenery_">＃試合風景</li>
96
+
97
+ </ul>
98
+
99
+ <div id="photo_gallerys" class="clearfix">
100
+
101
+ <ul class="photo_title">
102
+
103
+ <li class="practice_scenery">＃練習風景</li>
104
+
105
+ <li class="20180620">＃20180620</li>
106
+
107
+ <li class="off-shot">＃オフショット</li>
108
+
109
+ <li class="match_scenery">＃試合風景</li>
110
+
111
+ </ul>
112
+
113
+ <!-- フォト抜き出し-->
114
+
115
+ <ul class="photo photo_s">
116
+
117
+ <li class="practice_scenery">2018.06.18</li>
118
+
119
+ <li class="20180620">2018.06.18</li>
120
+
121
+ <li class="off-shot">2018.06.18</li>
122
+
123
+ <li class="off-shot">2018.06.18</li>
124
+
125
+ </ul>
126
+
127
+
128
+
129
+ 下記がCSSになります。
130
+
131
+ div#photo_gallery {
132
+
133
+ clear: both;
134
+
135
+ overflow: hidden;
136
+
137
+ }
138
+
139
+ div#photo_gallery .btn_detail {
140
+
141
+ background: #fff;
142
+
143
+ padding: 20px;
144
+
145
+ margin: 30px 0;
146
+
147
+ text-align: center;
148
+
149
+ border: 1px solid #fff;
150
+
151
+ color: #e79c37;
152
+
153
+ }
154
+
155
+ div#photo_gallery ul.tab {
156
+
157
+ padding: 15px;
158
+
159
+ text-align:center;
160
+
161
+ overflow: hidden;
162
+
163
+ 　　background: #fdb95e;
164
+
165
+ }
166
+
167
+ div#photo_gallery ul.tab li {
168
+
169
+ color: #000;
170
+
171
+ margin: 0;
172
+
173
+ float: left;
174
+
175
+ letter-spacing: 1;
176
+
177
+ padding: 5px 45px;
178
+
179
+ cursor: pointer;
180
+
181
+ }
182
+
183
+ div#photo_gallery ul.tab li.active {
184
+
185
+ background: #cc7500;
186
+
187
+ color: #fff;
188
+
189
+ }
190
+
191
+ div#photo_gallerys {
192
+
193
+ }
194
+
195
+ div#photo_gallerys ul.photo_s {
196
+
197
+ margin: 10px 0 0px;
198
+
199
+ overflow: hidden;
200
+
201
+ }
202
+
203
+ div#photo_gallerys ul.photo_s li {
204
+
205
+ float: left;
206
+
207
+ width: 24%;
208
+
209
+ margin: 0 4px 12px;
210
+
211
+ }
212
+
213
+ div#photo_gallerys ul.photo_s li img {
214
+
215
+ width: 100%;
216
+
217
+ }