質問編集履歴

2

jqueryもまだまだ初心者ですみません。わかりにくい説明となってしまってすみません。

2019/03/03 04:52

投稿

akintat-2748
akintat-2748

スコア25

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
 
54
54
 
55
- ```ここに言語を入力
55
+ ```ここに言語を入力
56
56
 
57
57
  <div id="q1" class="Question1">
58
58
 
@@ -64,356 +64,336 @@
64
64
 
65
65
  </div>
66
66
 
67
+
68
+
69
+ <div id="q2" class="Question2">
70
+
71
+ <img src="Question2.jpg" >
72
+
73
+ <a class="btn" href="#q3"><img class="yes2" src="yes.png"></a>
74
+
75
+ <a class="btn" href="#q3"><img class="no2" src="no.png"></a>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ <div id="q3" class="Question3" >
82
+
83
+ <img src="Question3.jpg" >
84
+
85
+ <a class="btn" href="#q4"><img class="yes3" src="yes.png"></a>
86
+
87
+ <a class="btn" href="#q4"><img class="no3" src="no.png"></a>
88
+
89
+ </div>
90
+
91
+
92
+
93
+ <div id="q4" class="Question4">
94
+
95
+ <img src="Question4.jpg" >
96
+
97
+ <a class="btn" href="#q5"><img class="yes4" src="yes.png"></a>
98
+
99
+ <a class="btn" href="#q5"><img class="no4" src="no.png"></a>
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <div id="q5" class="Question5" >
106
+
107
+ <img src="Question5.jpg" >
108
+
109
+ <a class="btn" href="#q6"><img class="yes5" src="yes.png"></a>
110
+
111
+ <a class="btn" href="#q6"><img class="no5" src="no.png"></a>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ <div id="q6" class="Question6" >
118
+
119
+ <img src="Question6.jpg" >
120
+
121
+ <a class="btn" href="#q7"><img class="yes6" src="yes.png"></a>
122
+
123
+ <a class="btn" href="#q7"><img class="no6" src="no.png"></a>
124
+
125
+ </div>
126
+
127
+
128
+
129
+ <div id="q7" class="Question2">
130
+
131
+ <img src="Question7.jpg" >
132
+
133
+ <a class="btn" href="#q8"><img class="yes7" src="yes.png"></a>
134
+
135
+ <a class="btn" href="#q8"><img class="no7" src="no.png"></a>
136
+
137
+ </div>
138
+
139
+
140
+
67
141
  ```
68
142
 
69
143
 
70
144
 
145
+ **<CSS>**
146
+
71
147
  ```ここに言語を入力
72
148
 
149
+ .Question1{
150
+
73
- <div id="q2" class="Question2">
151
+ padding-top:150px;
74
-
152
+
75
- <img src="Question2.jpg" >
153
+ padding-left:350px;
76
-
77
- <a class="btn" href="#q3"><img class="yes2" src="yes.png"></a>
154
+
78
-
79
- <a class="btn" href="#q3"><img class="no2" src="no.png"></a>
80
-
81
- </div>
155
+ position:relative;
156
+
157
+ }
158
+
159
+ .yes1{
160
+
161
+ position: absolute;
162
+
163
+ right:850px;
164
+
165
+ top:400px;
166
+
167
+ }
168
+
169
+ .no1{
170
+
171
+ position: absolute;
172
+
173
+ right:650px;
174
+
175
+ top:400px;
176
+
177
+ }
178
+
179
+ .Question2 {
180
+
181
+ padding-top:150px;
182
+
183
+ padding-left:350px;
184
+
185
+ position:relative;
186
+
187
+ }
188
+
189
+ .yes2{
190
+
191
+ position: absolute;
192
+
193
+ right:850px;
194
+
195
+ top:400px;
196
+
197
+ }
198
+
199
+ .no2{
200
+
201
+ position: absolute;
202
+
203
+ right:650px;
204
+
205
+ top:400px;
206
+
207
+ }
208
+
209
+ .Question3 {
210
+
211
+ padding-top:150px;
212
+
213
+ padding-left:350px;
214
+
215
+ position:relative;
216
+
217
+ }
218
+
219
+ .yes3{
220
+
221
+ position: absolute;
222
+
223
+ right:850px;
224
+
225
+ top:400px;
226
+
227
+ }
228
+
229
+ .no3{
230
+
231
+ position: absolute;
232
+
233
+ right:650px;
234
+
235
+ top:400px;
236
+
237
+ }
238
+
239
+ .Question4 {
240
+
241
+ padding-top:150px;
242
+
243
+ padding-left:350px;
244
+
245
+ position:relative;
246
+
247
+ }
248
+
249
+ .yes4{
250
+
251
+ position: absolute;
252
+
253
+ right:850px;
254
+
255
+ top:400px;
256
+
257
+ }
258
+
259
+ .no4{
260
+
261
+ position: absolute;
262
+
263
+ right:650px;
264
+
265
+ top:400px;
266
+
267
+ }
268
+
269
+ .Question5 {
270
+
271
+ padding-top:150px;
272
+
273
+ padding-left:350px;
274
+
275
+ position:relative;
276
+
277
+ }
278
+
279
+ .yes5{
280
+
281
+ position: absolute;
282
+
283
+ right:850px;
284
+
285
+ top:400px;
286
+
287
+ }
288
+
289
+ .no5{
290
+
291
+ position: absolute;
292
+
293
+ right:650px;
294
+
295
+ top:400px;
296
+
297
+ }
298
+
299
+ .Question6 {
300
+
301
+ padding-top:150px;
302
+
303
+ padding-left:350px;
304
+
305
+ position:relative;
306
+
307
+ }
308
+
309
+ .yes6{
310
+
311
+ position: absolute;
312
+
313
+ right:850px;
314
+
315
+ top:400px;
316
+
317
+ }
318
+
319
+ .no6{
320
+
321
+ position: absolute;
322
+
323
+ right:650px;
324
+
325
+ top:400px;
326
+
327
+ }
328
+
329
+ .Question7 {
330
+
331
+ padding-top:150px;
332
+
333
+ padding-left:350px;
334
+
335
+ position:relative;
336
+
337
+ }
338
+
339
+ .yes7{
340
+
341
+ position: absolute;
342
+
343
+ right:850px;
344
+
345
+ top:400px;
346
+
347
+ }
348
+
349
+ .no7{
350
+
351
+ position: absolute;
352
+
353
+ right:650px;
354
+
355
+ top:400px;
356
+
357
+ }
82
358
 
83
359
  ```
84
360
 
85
361
 
86
362
 
363
+
364
+
365
+ jqueryに関しては以下のコードを参考にしましたが、うまく動きませんでした。
366
+
87
367
  ```ここに言語を入力
88
368
 
369
+ $(function(){
370
+
89
- <div id="q3" class="Question3" >
371
+ $("btn").on("click", function() {
90
-
91
- <img src="Question3.jpg" >
372
+
92
-
93
- <a class="btn" href="#q4"><img class="yes3" src="yes.png"></a>
94
-
95
- <a class="btn" href="#q4"><img class="no3" src="no.png"></a>
373
+ $(this).closest("div").css("display","none");
96
-
374
+
97
- </div>
375
+ id = $(this).attr("href");
376
+
377
+ $(id).addClass("positionFit").show("fast");
378
+
379
+ });
380
+
381
+ });
382
+
383
+ ```
384
+
385
+
386
+
387
+
388
+
389
+ ```ここに言語名を
390
+
391
+ ソースコード
98
392
 
99
393
  ```
100
394
 
101
395
 
102
396
 
103
- ```ここに言語を入力
104
-
105
- <div id="q4" class="Question4">
106
-
107
- <img src="Question4.jpg" >
108
-
109
- <a class="btn" href="#q5"><img class="yes4" src="yes.png"></a>
110
-
111
- <a class="btn" href="#q5"><img class="no4" src="no.png"></a>
112
-
113
- </div>
114
-
115
- ```
116
-
117
-
118
-
119
- ```ここに言語を入力
120
-
121
- <div id="q5" class="Question5" >
122
-
123
- <img src="Question5.jpg" >
124
-
125
- <a class="btn" href="#q6"><img class="yes5" src="yes.png"></a>
126
-
127
- <a class="btn" href="#q6"><img class="no5" src="no.png"></a>
128
-
129
- </div>
130
-
131
- ```
132
-
133
-
134
-
135
- ```ここに言語を入力
136
-
137
- <div id="q6" class="Question6" >
138
-
139
- <img src="Question6.jpg" >
140
-
141
- <a class="btn" href="#q7"><img class="yes6" src="yes.png"></a>
142
-
143
- <a class="btn" href="#q7"><img class="no6" src="no.png"></a>
144
-
145
- </div>
146
-
147
- ```
148
-
149
-
150
-
151
- ```ここに言語を入力
152
-
153
- <div id="q7" class="Question2">
154
-
155
- <img src="Question7.jpg" >
156
-
157
- <a class="btn" href="#q8"><img class="yes7" src="yes.png"></a>
158
-
159
- <a class="btn" href="#q8"><img class="no7" src="no.png"></a>
160
-
161
- </div>
162
-
163
- ```
164
-
165
-
166
-
167
-
168
-
169
- **<CSS>**
170
-
171
- ```ここに言語を入力
172
-
173
- .Question1{
174
-
175
- padding-top:150px;
176
-
177
- padding-left:350px;
178
-
179
- position:relative;
180
-
181
- }
182
-
183
- .yes1{
184
-
185
- position: absolute;
186
-
187
- right:850px;
188
-
189
- top:400px;
190
-
191
- }
192
-
193
- .no1{
194
-
195
- position: absolute;
196
-
197
- right:650px;
198
-
199
- top:400px;
200
-
201
- }
202
-
203
- ```
204
-
205
- ```ここに言語を入力
206
-
207
- .Question2 {
208
-
209
- padding-top:150px;
210
-
211
- padding-left:350px;
212
-
213
- position:relative;
214
-
215
- }
216
-
217
- .yes2{
218
-
219
- position: absolute;
220
-
221
- right:850px;
222
-
223
- top:400px;
224
-
225
- }
226
-
227
- .no2{
228
-
229
- position: absolute;
230
-
231
- right:650px;
232
-
233
- top:400px;
234
-
235
- }
236
-
237
- ```
238
-
239
- ```ここに言語を入力
240
-
241
- .Question3 {
242
-
243
- padding-top:150px;
244
-
245
- padding-left:350px;
246
-
247
- position:relative;
248
-
249
- }
250
-
251
- .yes3{
252
-
253
- position: absolute;
254
-
255
- right:850px;
256
-
257
- top:400px;
258
-
259
- }
260
-
261
- .no3{
262
-
263
- position: absolute;
264
-
265
- right:650px;
266
-
267
- top:400px;
268
-
269
- }
270
-
271
- ```
272
-
273
- ```ここに言語を入力
274
-
275
- .Question4 {
276
-
277
- padding-top:150px;
278
-
279
- padding-left:350px;
280
-
281
- position:relative;
282
-
283
- }
284
-
285
- .yes4{
286
-
287
- position: absolute;
288
-
289
- right:850px;
290
-
291
- top:400px;
292
-
293
- }
294
-
295
- .no4{
296
-
297
- position: absolute;
298
-
299
- right:650px;
300
-
301
- top:400px;
302
-
303
- }
304
-
305
- ```
306
-
307
- ```ここに言語を入力
308
-
309
- .Question5 {
310
-
311
- padding-top:150px;
312
-
313
- padding-left:350px;
314
-
315
- position:relative;
316
-
317
- }
318
-
319
- .yes5{
320
-
321
- position: absolute;
322
-
323
- right:850px;
324
-
325
- top:400px;
326
-
327
- }
328
-
329
- .no5{
330
-
331
- position: absolute;
332
-
333
- right:650px;
334
-
335
- top:400px;
336
-
337
- }
338
-
339
- ```
340
-
341
- ```ここに言語を入力
342
-
343
- .Question6 {
344
-
345
- padding-top:150px;
346
-
347
- padding-left:350px;
348
-
349
- position:relative;
350
-
351
- }
352
-
353
- .yes6{
354
-
355
- position: absolute;
356
-
357
- right:850px;
358
-
359
- top:400px;
360
-
361
- }
362
-
363
- .no6{
364
-
365
- position: absolute;
366
-
367
- right:650px;
368
-
369
- top:400px;
370
-
371
- }
372
-
373
- ```
374
-
375
- ```ここに言語を入力
376
-
377
- .Question7 {
378
-
379
- padding-top:150px;
380
-
381
- padding-left:350px;
382
-
383
- position:relative;
384
-
385
- }
386
-
387
- .yes7{
388
-
389
- position: absolute;
390
-
391
- right:850px;
392
-
393
- top:400px;
394
-
395
- }
396
-
397
- .no7{
398
-
399
- position: absolute;
400
-
401
- right:650px;
402
-
403
- top:400px;
404
-
405
- }
406
-
407
- ```
408
-
409
- ```ここに言語名を入力
410
-
411
- ソースコード
412
-
413
- ```
414
-
415
-
416
-
417
397
  ### 試したこと
418
398
 
419
399
 

1

コードブロックを追加しました。

2019/03/03 04:52

投稿

akintat-2748
akintat-2748

スコア25

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,9 @@
52
52
 
53
53
 
54
54
 
55
+ ```ここに言語を入力
56
+
55
- <div id="q1" class="Question1">
57
+ <div id="q1" class="Question1">
56
58
 
57
59
  <img src="Question1.jpg" >
58
60
 
@@ -62,7 +64,11 @@
62
64
 
63
65
  </div>
64
66
 
65
-
67
+ ```
68
+
69
+
70
+
71
+ ```ここに言語を入力
66
72
 
67
73
  <div id="q2" class="Question2">
68
74
 
@@ -74,7 +80,11 @@
74
80
 
75
81
  </div>
76
82
 
77
-
83
+ ```
84
+
85
+
86
+
87
+ ```ここに言語を入力
78
88
 
79
89
  <div id="q3" class="Question3" >
80
90
 
@@ -86,7 +96,11 @@
86
96
 
87
97
  </div>
88
98
 
89
-
99
+ ```
100
+
101
+
102
+
103
+ ```ここに言語を入力
90
104
 
91
105
  <div id="q4" class="Question4">
92
106
 
@@ -98,7 +112,11 @@
98
112
 
99
113
  </div>
100
114
 
101
-
115
+ ```
116
+
117
+
118
+
119
+ ```ここに言語を入力
102
120
 
103
121
  <div id="q5" class="Question5" >
104
122
 
@@ -110,7 +128,11 @@
110
128
 
111
129
  </div>
112
130
 
113
-
131
+ ```
132
+
133
+
134
+
135
+ ```ここに言語を入力
114
136
 
115
137
  <div id="q6" class="Question6" >
116
138
 
@@ -122,7 +144,11 @@
122
144
 
123
145
  </div>
124
146
 
125
-
147
+ ```
148
+
149
+
150
+
151
+ ```ここに言語を入力
126
152
 
127
153
  <div id="q7" class="Question2">
128
154
 
@@ -134,12 +160,16 @@
134
160
 
135
161
  </div>
136
162
 
163
+ ```
164
+
137
165
 
138
166
 
139
167
 
140
168
 
141
169
  **<CSS>**
142
170
 
171
+ ```ここに言語を入力
172
+
143
173
  .Question1{
144
174
 
145
175
  padding-top:150px;
@@ -170,6 +200,10 @@
170
200
 
171
201
  }
172
202
 
203
+ ```
204
+
205
+ ```ここに言語を入力
206
+
173
207
  .Question2 {
174
208
 
175
209
  padding-top:150px;
@@ -200,6 +234,10 @@
200
234
 
201
235
  }
202
236
 
237
+ ```
238
+
239
+ ```ここに言語を入力
240
+
203
241
  .Question3 {
204
242
 
205
243
  padding-top:150px;
@@ -230,6 +268,10 @@
230
268
 
231
269
  }
232
270
 
271
+ ```
272
+
273
+ ```ここに言語を入力
274
+
233
275
  .Question4 {
234
276
 
235
277
  padding-top:150px;
@@ -260,6 +302,10 @@
260
302
 
261
303
  }
262
304
 
305
+ ```
306
+
307
+ ```ここに言語を入力
308
+
263
309
  .Question5 {
264
310
 
265
311
  padding-top:150px;
@@ -290,6 +336,10 @@
290
336
 
291
337
  }
292
338
 
339
+ ```
340
+
341
+ ```ここに言語を入力
342
+
293
343
  .Question6 {
294
344
 
295
345
  padding-top:150px;
@@ -320,6 +370,10 @@
320
370
 
321
371
  }
322
372
 
373
+ ```
374
+
375
+ ```ここに言語を入力
376
+
323
377
  .Question7 {
324
378
 
325
379
  padding-top:150px;
@@ -350,6 +404,8 @@
350
404
 
351
405
  }
352
406
 
407
+ ```
408
+
353
409
  ```ここに言語名を入力
354
410
 
355
411
  ソースコード