質問編集履歴

3

修正依頼によるコードの追加

2018/07/05 00:46

投稿

SteveLight
SteveLight

スコア12

test CHANGED
File without changes
test CHANGED
@@ -579,3 +579,287 @@
579
579
  }
580
580
 
581
581
  ```
582
+
583
+ ```jsここに言語を入力
584
+
585
+ $(function(){
586
+
587
+ $(document).ready(function(){
588
+
589
+ $(".form-wrapper .button").click(function(){
590
+
591
+ var button = $(this);
592
+
593
+ var currentSection = button.parents(".section");
594
+
595
+ var currentSectionIndex = currentSection.index();
596
+
597
+ var headerSection = $('.steps li').eq(currentSectionIndex);
598
+
599
+ currentSection.removeClass("is-active").next().addClass("is-active");
600
+
601
+ headerSection.removeClass("is-active").next().addClass("is-active");
602
+
603
+
604
+
605
+ $(".form-wrapper").submit(function(e) {
606
+
607
+ e.preventDefault();
608
+
609
+ });
610
+
611
+ if(currentSectionIndex === 3){
612
+
613
+ $(document).find(".form-wrapper .section").first().addClass("is-active");
614
+
615
+ $(document).find(".steps li").first().addClass("is-active");
616
+
617
+ }
618
+
619
+
620
+
621
+ });
622
+
623
+
624
+
625
+
626
+
627
+ });
628
+
629
+ $('.label-first').click(function(){
630
+
631
+ $('.city-list-block').removeClass('city-list');
632
+
633
+ $('.post-form').removeClass("post-form-block");
634
+
635
+ });
636
+
637
+
638
+
639
+ $('.label-second').click(function(){
640
+
641
+ $('.city-list-block').addClass('city-list');
642
+
643
+ $('.post-form').addClass('post-form-block');
644
+
645
+ });
646
+
647
+ });
648
+
649
+ ```
650
+
651
+
652
+
653
+
654
+
655
+ ```htmlここに言語を入力
656
+
657
+ <!DOCTYPE html>
658
+
659
+ <html>
660
+
661
+ <head>
662
+
663
+ <meta charset="utf-8">
664
+
665
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
666
+
667
+ <title>フォーム</title>
668
+
669
+
670
+
671
+ <link rel="stylesheet" href="aaa.css">
672
+
673
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
674
+
675
+ <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
676
+
677
+ <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
678
+
679
+ </head>
680
+
681
+ <body>
682
+
683
+ <div class='left-b' id="backing">
684
+
685
+ <a href='#' class="backto">戻る</a>
686
+
687
+ </div>
688
+
689
+ <div class="container">
690
+
691
+ <div class="wrapper">
692
+
693
+
694
+
695
+ <ul class="steps">
696
+
697
+ <li class="is-active">Step 1</li>
698
+
699
+ <li>Step 2</li>
700
+
701
+ <li>Step 3</li>
702
+
703
+ </ul>
704
+
705
+
706
+
707
+ <form class="form-wrapper">
708
+
709
+
710
+
711
+ <fieldset class="section is-active" name="sec">
712
+
713
+ <h3>あ</h3>
714
+
715
+ <div class="row cf">
716
+
717
+ <div class="four col">
718
+
719
+ <input type="radio" name="r1" id="r1" checked>
720
+
721
+ <label for="r1" class="label-first">
722
+
723
+ <h4>い</h4>
724
+
725
+ </label>
726
+
727
+ </div>
728
+
729
+ <div class="four col">
730
+
731
+ <input type="radio" name="r1" id="r2">
732
+
733
+ <label for="r2" class="label-second">
734
+
735
+ <h4>う</h4>
736
+
737
+ </label>
738
+
739
+ </div>
740
+
741
+ </div>
742
+
743
+ <div class="button">Next</div>
744
+
745
+ </fieldset>
746
+
747
+
748
+
749
+ <fieldset class="section" name="sec">
750
+
751
+ <h3>個人情報</h3>
752
+
753
+ <input type="text" name="name" id="name" placeholder="名前">
754
+
755
+ <input type="text" name="email" id="name1" placeholder="ふりがな">
756
+
757
+ <input type="text" name="email" id="mumber" placeholder="電話番号">
758
+
759
+ <input type="text" name="email" id="email" placeholder="メールアドレス">
760
+
761
+
762
+
763
+
764
+
765
+ <!-- ▼郵便番号入力フィールド(7桁) -->
766
+
767
+ <div class="post-form">
768
+
769
+ <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
770
+
771
+ <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
772
+
773
+ </div>
774
+
775
+
776
+
777
+ <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
778
+
779
+ <div class="post">
780
+
781
+ <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
782
+
783
+ </div>
784
+
785
+ </div>
786
+
787
+ <div class="button">Next</div>
788
+
789
+ </fieldset>
790
+
791
+
792
+
793
+ <fieldset class="section" name="sec">
794
+
795
+ <h3>え</h3>
796
+
797
+ <input type="password" name="password" id="password" placeholder="Password">
798
+
799
+ <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
800
+
801
+
802
+
803
+
804
+
805
+ <div class="city-list-block">
806
+
807
+ <!-- <form class=action="" method="post">-->
808
+
809
+
810
+
811
+ <p>お</p>
812
+
813
+ <select name="country" class="country">
814
+
815
+
816
+
817
+ <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
818
+
819
+ <option value="Japan" class="japan">北海道</option>
820
+
821
+ <option value="America" class="America">青森県</option>
822
+
823
+ <option value="Australia" class="Australia">岩手県</option>
824
+
825
+
826
+
827
+ </select>
828
+
829
+ </div>
830
+
831
+
832
+
833
+ <input class="submit button" type="submit" value="送信">
834
+
835
+ </fieldset>
836
+
837
+ <fieldset class="section">
838
+
839
+ <h3>依頼完了!</h3>
840
+
841
+ <p>ご利用いただきありがとうございます。</p>
842
+
843
+
844
+
845
+ <div class="button">終了</div>
846
+
847
+ </fieldset>
848
+
849
+ </form>
850
+
851
+ </div>
852
+
853
+ </div>
854
+
855
+
856
+
857
+ <script src="aaa.js"></script>
858
+
859
+ </body>
860
+
861
+ </html>
862
+
863
+
864
+
865
+ ```

2

修正依頼によるコードの追加

2018/07/05 00:46

投稿

SteveLight
SteveLight

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,481 +1,581 @@
1
- ```ここに言語を入力
2
-
3
- コード
4
-
5
- $(function(){
6
-
7
-
8
-
9
- $(document).ready(function(){
10
-
11
- $(".form-wrapper .button").click(function(){
12
-
13
- var button = $(this);
14
-
15
- var currentSection = button.parents(".section");
16
-
17
- var currentSectionIndex = currentSection.index();
18
-
19
- var headerSection = $('.steps li').eq(currentSectionIndex);
20
-
21
- currentSection.removeClass("is-active").next().addClass("is-active");
22
-
23
- headerSection.removeClass("is-active").next().addClass("is-active");
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
- $(".form-wrapper").submit(function(e) {
34
-
35
- e.preventDefault();
36
-
37
- });
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
- if(currentSectionIndex === 3){
46
-
47
- $(document).find(".form-wrapper .section").first().addClass("is-active");
48
-
49
- $(document).find(".steps li").first().addClass("is-active");
50
-
51
- }
52
-
53
- });
54
-
55
- ``
56
-
57
-
1
+ ```cssここに言語を入力
2
+
3
+ html, body{
4
+
5
+ width: 100%;
6
+
7
+ height: 100%;
8
+
9
+ margin: 0;
10
+
11
+ padding: 0;
12
+
13
+ font-family: 'Open Sans', sans-serif;
14
+
15
+ background-color: #3498db;
16
+
17
+ }
18
+
19
+
20
+
21
+ h1, h2, h3, h4, h5 ,h6{
22
+
23
+ font-weight: 200;
24
+
25
+ }
26
+
27
+
28
+
29
+ a{
30
+
31
+ text-decoration: none;
32
+
33
+ }
34
+
35
+
36
+
37
+ p, li, a{
38
+
39
+ font-size: 14px;
40
+
41
+ }
42
+
43
+
44
+
45
+ fieldset{
46
+
47
+ margin: 0;
48
+
49
+ padding: 0;
50
+
51
+ border: none;
52
+
53
+ }
54
+
55
+
56
+
57
+ .left-b a{
58
+
59
+ position: absolute;
60
+
61
+ left: 20px;
62
+
63
+ top:12px;
64
+
65
+ font-size: 18px;
66
+
67
+
68
+
69
+ color: white;
70
+
71
+ }
72
+
73
+
74
+
75
+
76
+
77
+ /* GRID */
78
+
79
+
80
+
81
+ .twelve { width: 100%; }
82
+
83
+ .eleven { width: 91.53%; }
84
+
85
+ .ten { width: 83.06%; }
86
+
87
+ .nine { width: 74.6%; }
88
+
89
+ .eight { width: 66.13%; }
90
+
91
+ .seven { width: 57.66%; }
92
+
93
+ .six { width: 49.2%; }
94
+
95
+ .five { width: 40.73%; }
96
+
97
+ .four { width: 32.26%; }
98
+
99
+ .three { width: 23.8%; }
100
+
101
+ .two { width: 15.33%; }
102
+
103
+ .one { width: 6.866%; }
104
+
105
+
106
+
107
+ /* COLUMNS */
108
+
109
+
110
+
111
+ .col {
112
+
113
+ display:block;
114
+
115
+ width: 100%;
116
+
117
+ padding-bottom: 30px;
118
+
119
+
120
+
121
+ }
122
+
123
+
124
+
125
+ .col:first-of-type {
126
+
127
+ margin-left: 0;
128
+
129
+ }
130
+
131
+
132
+
133
+ .container{
134
+
135
+ width: 100%;
136
+
137
+ max-width: 700px;
138
+
139
+ margin: 0 auto;
140
+
141
+ position: relative;
142
+
143
+ }
144
+
145
+
146
+
147
+ .row{
148
+
149
+ padding: 20px 0;
150
+
151
+ }
152
+
153
+
154
+
155
+ /* CLEARFIX */
156
+
157
+
158
+
159
+ .cf:before,
160
+
161
+ .cf:after {
162
+
163
+ content: " ";
164
+
165
+ display: table;
166
+
167
+ }
168
+
169
+
170
+
171
+ .cf:after {
172
+
173
+ clear: both;
174
+
175
+ }
176
+
177
+
178
+
179
+ .cf {
180
+
181
+ *zoom: 1;
182
+
183
+ }
184
+
185
+
186
+
187
+ .wrapper{
188
+
189
+ width: 100%;
190
+
191
+ margin: 30px 0;
192
+
193
+ }
194
+
195
+
196
+
197
+ /* STEPS */
198
+
199
+
200
+
201
+ .steps{
202
+
203
+ list-style-type: none;
204
+
205
+ margin: 0;
206
+
207
+ padding: 0;
208
+
209
+ background-color: #fff;
210
+
211
+ text-align: center;
212
+
213
+ }
214
+
215
+
216
+
217
+
218
+
219
+ .steps li{
220
+
221
+ display: inline-block;
222
+
223
+ margin: 20px;
224
+
225
+ color: #ccc;
226
+
227
+ padding-bottom: 5px;
228
+
229
+ }
230
+
231
+
232
+
233
+ .steps li.is-active{
234
+
235
+ border-bottom: 1px solid #3498db;
236
+
237
+ color: #3498db;
238
+
239
+ }
240
+
241
+
242
+
243
+ /* FORM */
244
+
245
+
246
+
247
+ .form-wrapper .section{
248
+
249
+ padding: 0px 20px 180px 20px;
250
+
251
+ -webkit-box-sizing: border-box;
252
+
253
+ -moz-box-sizing: border-box;
254
+
255
+ box-sizing: border-box;
256
+
257
+ background-color: #fff;
258
+
259
+ opacity: 0;
260
+
261
+ -webkit-transform: scale(1, 0);
262
+
263
+ -ms-transform: scale(1, 0);
264
+
265
+ -o-transform: scale(1, 0);
266
+
267
+ transform: scale(1, 0);
268
+
269
+ -webkit-transform-origin: top center;
270
+
271
+ -moz-transform-origin: top center;
272
+
273
+ -ms-transform-origin: top center;
274
+
275
+ -o-transform-origin: top center;
276
+
277
+ transform-origin: top center;
278
+
279
+ -webkit-transition: all 0.5s ease-in-out;
280
+
281
+ -o-transition: all 0.5s ease-in-out;
282
+
283
+ transition: all 0.5s ease-in-out;
284
+
285
+ text-align: center;
286
+
287
+ position: absolute;
288
+
289
+ width: 100%;
290
+
291
+ min-height: 300px
292
+
293
+ }
294
+
295
+
296
+
297
+ .form-wrapper .section h3{
298
+
299
+ margin-bottom: 30px;
300
+
301
+ }
302
+
303
+
304
+
305
+ .form-wrapper .section.is-active{
306
+
307
+ opacity: 1;
308
+
309
+ -webkit-transform: scale(1, 1);
310
+
311
+ -ms-transform: scale(1, 1);
312
+
313
+ -o-transform: scale(1, 1);
314
+
315
+ transform: scale(1, 1);
316
+
317
+ }
318
+
319
+
320
+
321
+ .form-wrapper .button, .form-wrapper .submit{
322
+
323
+ background-color: #3498db;
324
+
325
+ display: inline-block;
326
+
327
+ padding: 10px 40px;
328
+
329
+ color: #fff;
330
+
331
+ cursor: pointer;
332
+
333
+ font-size: 14px !important;
334
+
335
+ font-family: 'Open Sans', sans-serif !important;
336
+
337
+ position: absolute;
338
+
339
+ right: 20px;
340
+
341
+ bottom: 20px;
342
+
343
+ }
344
+
345
+
346
+
347
+ .form-wrapper .submit{
348
+
349
+ border: none;
350
+
351
+ outline: none;
352
+
353
+ -webkit-box-sizing: content-box;
354
+
355
+ -moz-box-sizing: content-box;
356
+
357
+ box-sizing: content-box;
358
+
359
+ -webkit-appearance: none;
360
+
361
+ -moz-appearance: none;
362
+
363
+ appearance: none;
364
+
365
+ }
366
+
367
+
368
+
369
+ .form-wrapper input[type="text"],
370
+
371
+ .form-wrapper input[type="password"]{
372
+
373
+ display: block;
374
+
375
+ padding: 10px;
376
+
377
+ margin: 30px auto;
378
+
379
+ background-color: #f1f1f1;
380
+
381
+ border: none;
382
+
383
+ width: 70%;
384
+
385
+ outline: none;
386
+
387
+ font-size: 14px !important;
388
+
389
+ font-family: 'Open Sans', sans-serif !important;
390
+
391
+ }
392
+
393
+
394
+
395
+ .form-wrapper input[type="radio"]{
396
+
397
+ display: none;
398
+
399
+ }
400
+
401
+
402
+
403
+ .form-wrapper input[type="radio"] + label{
404
+
405
+ display: block;
406
+
407
+ border: 1px solid #ccc;
408
+
409
+ width: 100%;
410
+
411
+ max-width: 100%;
412
+
413
+ padding: 10px;
414
+
415
+ -webkit-box-sizing: border-box;
416
+
417
+ -moz-box-sizing: border-box;
418
+
419
+ box-sizing: border-box;
420
+
421
+ cursor: pointer;
422
+
423
+ position: relative;
424
+
425
+ }
426
+
427
+
428
+
429
+ .form-wrapper input[type="radio"] + label:before{
430
+
431
+ content: "✔";
432
+
433
+ position: absolute;
434
+
435
+ right: -10px;
436
+
437
+ top: -10px;
438
+
439
+ width: 30px;
440
+
441
+ height: 30px;
442
+
443
+ line-height: 30px;
444
+
445
+ border-radius: 100%;
446
+
447
+ background-color: #3498db;
448
+
449
+ color: #fff;
450
+
451
+ display: none;
452
+
453
+ }
454
+
455
+
456
+
457
+ .form-wrapper input[type="radio"]:checked + label:before{
458
+
459
+ display: block;
460
+
461
+ }
462
+
463
+
464
+
465
+ .form-wrapper input[type="radio"] + label h4{
466
+
467
+ margin: 15px;
468
+
469
+ color: #ccc;
470
+
471
+ }
472
+
473
+
474
+
475
+ .form-wrapper input[type="radio"]:checked + label{
476
+
477
+ border: 1px solid #3498db;
478
+
479
+ }
480
+
481
+
482
+
483
+ .form-wrapper input[type="radio"]:checked + label h4{
484
+
485
+ color: #3498db;
486
+
487
+ }
488
+
489
+
490
+
491
+ .is-active input{
492
+
493
+ padding-bottom: 10px;
494
+
495
+ }
496
+
497
+ .post-form{
498
+
499
+ display: none;
500
+
501
+ }
502
+
503
+ .post-form p{
504
+
505
+ padding-bottom: 1px;
506
+
507
+ }
508
+
509
+ .post p{
510
+
511
+ font-size: 12px;
512
+
513
+ padding-top: 15px;
514
+
515
+ width: 80%;
516
+
517
+
518
+
519
+ }
520
+
521
+ .post-form-block{
522
+
523
+ display: block;
524
+
525
+ }
526
+
527
+
528
+
529
+ .post-namber{
530
+
531
+ width:40%;
532
+
533
+ font-size: 18px;
534
+
535
+ height: 30px;
536
+
537
+ }
538
+
539
+ .uther-address{
540
+
541
+ width:80%;
542
+
543
+ font-size: 18px;
544
+
545
+ height: 30px;
546
+
547
+ }
548
+
549
+ .post:last-child span{
550
+
551
+ color: red;
552
+
553
+ font-size: 26px;
554
+
555
+ }
556
+
557
+ .post:first-child{
558
+
559
+ margin-bottom: 25px;
560
+
561
+ }
562
+
563
+ .post:last-child p{
564
+
565
+ padding-top:20px;
566
+
567
+ font-size: 16px;
568
+
569
+ }
570
+
571
+
572
+
573
+
574
+
575
+ .city-list{
576
+
577
+ display: none;
578
+
579
+ }
58
580
 
59
581
  ```
60
-
61
- ```ここに言語を入力
62
-
63
-
64
-
65
- <!DOCTYPE html>
66
-
67
- <html>
68
-
69
-
70
-
71
- <head>
72
-
73
- </head>
74
-
75
-
76
-
77
- <div>
78
-
79
- <a hlef="#" class="back">戻る</a>
80
-
81
- </div>
82
-
83
- <body>
84
-
85
- <div class="container">
86
-
87
- <div class="wrapper">
88
-
89
-
90
-
91
- <ul class="steps">
92
-
93
- <li class="is-active">Step 1</li>
94
-
95
- <li>Step 2</li>
96
-
97
- <li>Step 3</li>
98
-
99
- </ul>
100
-
101
-
102
-
103
- <form class="form-wrapper">
104
-
105
-
106
-
107
- <fieldset class="section is-active">
108
-
109
-     // 処理
110
-
111
- <div class="button">Next</div>
112
-
113
- </fieldset>
114
-
115
-
116
-
117
-
118
-
119
- <fieldset class="section">
120
-
121
-      //処理
122
-
123
- <div class="button">Next</div>
124
-
125
- </fieldset>
126
-
127
-
128
-
129
-
130
-
131
- <fieldset class="section">
132
-
133
-      // 処理
134
-
135
- <div class="button">Next</div>
136
-
137
- </fieldset>
138
-
139
-
140
-
141
- </form>
142
-
143
- </div>
144
-
145
- </div>
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
- </body>
154
-
155
- </html>
156
-
157
- ```
158
-
159
- 実装したい機能はフォームの戻るボタンで一つ前のフォームに戻ることです。
160
-
161
-
162
-
163
- htmlで三つのsectionがありますが、これは入力フォームが3ステップになっているということです。
164
-
165
-
166
-
167
- またsectionとli要素は非表示状態ですが一番最初の要素にはis-activeが付加されており、cssからdisplay:blck;で表示されるようになっています。
168
-
169
-  
170
-
171
- nextボタンをクリックするとjsの処理により次の要素のliとsectionにis-activeが付加されます。liでステップ数の明示、sectionで新たな入力フォームへと切り替わります。
172
-
173
-
174
-
175
- しかし戻る機能が使えません。
176
-
177
- 2ステップ目から1ステップへ戻りたくても戻せない現状です。
178
-
179
-
180
-
181
- is-activeがsection(またはli)要素の何番目にあり、かつjs参照のコードのようにそれから、現在の要素からis-activeをリムーブし、一つ前の要素にis-activeを追加したいのです。
182
-
183
-
184
-
185
- currentSectionとheaderSectionをグローバル変数にして、 currentSection.removeClass("is-active").prev().addClass("is-active");
186
-
187
- headerSection.removeClass("is-active").prev().addClass("is-active");
188
-
189
-
190
-
191
- のようにしましたが一切反応がありませんでした。
192
-
193
-
194
-
195
- 知識が乏しいですがどうかお力を貸していただければと思います。
196
-
197
- 宜しくお願い致します。
198
-
199
- ```jsここに言語を入力
200
-
201
- $(function(){
202
-
203
- $(document).ready(function(){
204
-
205
- $(".form-wrapper .button").click(function(){
206
-
207
- var button = $(this);
208
-
209
- var currentSection = button.parents(".section");
210
-
211
- var currentSectionIndex = currentSection.index();
212
-
213
- var headerSection = $('.steps li').eq(currentSectionIndex);
214
-
215
- currentSection.removeClass("is-active").next().addClass("is-active");
216
-
217
- headerSection.removeClass("is-active").next().addClass("is-active");
218
-
219
-
220
-
221
- $(".form-wrapper").submit(function(e) {
222
-
223
- e.preventDefault();
224
-
225
- });
226
-
227
- if(currentSectionIndex === 3){
228
-
229
- $(document).find(".form-wrapper .section").first().addClass("is-active");
230
-
231
- $(document).find(".steps li").first().addClass("is-active");
232
-
233
- }
234
-
235
-
236
-
237
- });
238
-
239
-
240
-
241
-
242
-
243
- });
244
-
245
- $('.label-first').click(function(){
246
-
247
- $('.city-list-block').removeClass('city-list');
248
-
249
- $('.post-form').removeClass("post-form-block");
250
-
251
- });
252
-
253
-
254
-
255
- $('.label-second').click(function(){
256
-
257
- $('.city-list-block').addClass('city-list');
258
-
259
- $('.post-form').addClass('post-form-block');
260
-
261
- });
262
-
263
- });
264
-
265
- ```
266
-
267
-
268
-
269
-
270
-
271
- ```htmlここに言語を入力
272
-
273
- <!DOCTYPE html>
274
-
275
- <html>
276
-
277
- <head>
278
-
279
- <meta charset="utf-8">
280
-
281
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
282
-
283
- <title>フォーム</title>
284
-
285
-
286
-
287
- <link rel="stylesheet" href="aaa.css">
288
-
289
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
290
-
291
- <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
292
-
293
- <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
294
-
295
- </head>
296
-
297
- <body>
298
-
299
- <div class='left-b' id="backing">
300
-
301
- <a href='#' class="backto">戻る</a>
302
-
303
- </div>
304
-
305
- <div class="container">
306
-
307
- <div class="wrapper">
308
-
309
-
310
-
311
- <ul class="steps">
312
-
313
- <li class="is-active">Step 1</li>
314
-
315
- <li>Step 2</li>
316
-
317
- <li>Step 3</li>
318
-
319
- </ul>
320
-
321
-
322
-
323
- <form class="form-wrapper">
324
-
325
-
326
-
327
- <fieldset class="section is-active" name="sec">
328
-
329
- <h3>あ</h3>
330
-
331
- <div class="row cf">
332
-
333
- <div class="four col">
334
-
335
- <input type="radio" name="r1" id="r1" checked>
336
-
337
- <label for="r1" class="label-first">
338
-
339
- <h4>い</h4>
340
-
341
- </label>
342
-
343
- </div>
344
-
345
- <div class="four col">
346
-
347
- <input type="radio" name="r1" id="r2">
348
-
349
- <label for="r2" class="label-second">
350
-
351
- <h4>う</h4>
352
-
353
- </label>
354
-
355
- </div>
356
-
357
- </div>
358
-
359
- <div class="button">Next</div>
360
-
361
- </fieldset>
362
-
363
-
364
-
365
- <fieldset class="section" name="sec">
366
-
367
- <h3>個人情報</h3>
368
-
369
- <input type="text" name="name" id="name" placeholder="名前">
370
-
371
- <input type="text" name="email" id="name1" placeholder="ふりがな">
372
-
373
- <input type="text" name="email" id="mumber" placeholder="電話番号">
374
-
375
- <input type="text" name="email" id="email" placeholder="メールアドレス">
376
-
377
-
378
-
379
-
380
-
381
- <!-- ▼郵便番号入力フィールド(7桁) -->
382
-
383
- <div class="post-form">
384
-
385
- <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
386
-
387
- <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
388
-
389
- </div>
390
-
391
-
392
-
393
- <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
394
-
395
- <div class="post">
396
-
397
- <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
398
-
399
- </div>
400
-
401
- </div>
402
-
403
- <div class="button">Next</div>
404
-
405
- </fieldset>
406
-
407
-
408
-
409
- <fieldset class="section" name="sec">
410
-
411
- <h3>え</h3>
412
-
413
- <input type="password" name="password" id="password" placeholder="Password">
414
-
415
- <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
416
-
417
-
418
-
419
-
420
-
421
- <div class="city-list-block">
422
-
423
- <!-- <form class=action="" method="post">-->
424
-
425
-
426
-
427
- <p>お</p>
428
-
429
- <select name="country" class="country">
430
-
431
-
432
-
433
- <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
434
-
435
- <option value="Japan" class="japan">北海道</option>
436
-
437
- <option value="America" class="America">青森県</option>
438
-
439
- <option value="Australia" class="Australia">岩手県</option>
440
-
441
-
442
-
443
- </select>
444
-
445
- </div>
446
-
447
-
448
-
449
- <input class="submit button" type="submit" value="送信">
450
-
451
- </fieldset>
452
-
453
- <fieldset class="section">
454
-
455
- <h3>依頼完了!</h3>
456
-
457
- <p>ご利用いただきありがとうございます。</p>
458
-
459
-
460
-
461
- <div class="button">終了</div>
462
-
463
- </fieldset>
464
-
465
- </form>
466
-
467
- </div>
468
-
469
- </div>
470
-
471
-
472
-
473
- <script src="aaa.js"></script>
474
-
475
- </body>
476
-
477
- </html>
478
-
479
-
480
-
481
- ```

1

コードの追加

2018/07/05 00:41

投稿

SteveLight
SteveLight

スコア12

test CHANGED
File without changes
test CHANGED
@@ -195,3 +195,287 @@
195
195
  知識が乏しいですがどうかお力を貸していただければと思います。
196
196
 
197
197
  宜しくお願い致します。
198
+
199
+ ```jsここに言語を入力
200
+
201
+ $(function(){
202
+
203
+ $(document).ready(function(){
204
+
205
+ $(".form-wrapper .button").click(function(){
206
+
207
+ var button = $(this);
208
+
209
+ var currentSection = button.parents(".section");
210
+
211
+ var currentSectionIndex = currentSection.index();
212
+
213
+ var headerSection = $('.steps li').eq(currentSectionIndex);
214
+
215
+ currentSection.removeClass("is-active").next().addClass("is-active");
216
+
217
+ headerSection.removeClass("is-active").next().addClass("is-active");
218
+
219
+
220
+
221
+ $(".form-wrapper").submit(function(e) {
222
+
223
+ e.preventDefault();
224
+
225
+ });
226
+
227
+ if(currentSectionIndex === 3){
228
+
229
+ $(document).find(".form-wrapper .section").first().addClass("is-active");
230
+
231
+ $(document).find(".steps li").first().addClass("is-active");
232
+
233
+ }
234
+
235
+
236
+
237
+ });
238
+
239
+
240
+
241
+
242
+
243
+ });
244
+
245
+ $('.label-first').click(function(){
246
+
247
+ $('.city-list-block').removeClass('city-list');
248
+
249
+ $('.post-form').removeClass("post-form-block");
250
+
251
+ });
252
+
253
+
254
+
255
+ $('.label-second').click(function(){
256
+
257
+ $('.city-list-block').addClass('city-list');
258
+
259
+ $('.post-form').addClass('post-form-block');
260
+
261
+ });
262
+
263
+ });
264
+
265
+ ```
266
+
267
+
268
+
269
+
270
+
271
+ ```htmlここに言語を入力
272
+
273
+ <!DOCTYPE html>
274
+
275
+ <html>
276
+
277
+ <head>
278
+
279
+ <meta charset="utf-8">
280
+
281
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
282
+
283
+ <title>フォーム</title>
284
+
285
+
286
+
287
+ <link rel="stylesheet" href="aaa.css">
288
+
289
+ <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
290
+
291
+ <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
292
+
293
+ <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
294
+
295
+ </head>
296
+
297
+ <body>
298
+
299
+ <div class='left-b' id="backing">
300
+
301
+ <a href='#' class="backto">戻る</a>
302
+
303
+ </div>
304
+
305
+ <div class="container">
306
+
307
+ <div class="wrapper">
308
+
309
+
310
+
311
+ <ul class="steps">
312
+
313
+ <li class="is-active">Step 1</li>
314
+
315
+ <li>Step 2</li>
316
+
317
+ <li>Step 3</li>
318
+
319
+ </ul>
320
+
321
+
322
+
323
+ <form class="form-wrapper">
324
+
325
+
326
+
327
+ <fieldset class="section is-active" name="sec">
328
+
329
+ <h3>あ</h3>
330
+
331
+ <div class="row cf">
332
+
333
+ <div class="four col">
334
+
335
+ <input type="radio" name="r1" id="r1" checked>
336
+
337
+ <label for="r1" class="label-first">
338
+
339
+ <h4>い</h4>
340
+
341
+ </label>
342
+
343
+ </div>
344
+
345
+ <div class="four col">
346
+
347
+ <input type="radio" name="r1" id="r2">
348
+
349
+ <label for="r2" class="label-second">
350
+
351
+ <h4>う</h4>
352
+
353
+ </label>
354
+
355
+ </div>
356
+
357
+ </div>
358
+
359
+ <div class="button">Next</div>
360
+
361
+ </fieldset>
362
+
363
+
364
+
365
+ <fieldset class="section" name="sec">
366
+
367
+ <h3>個人情報</h3>
368
+
369
+ <input type="text" name="name" id="name" placeholder="名前">
370
+
371
+ <input type="text" name="email" id="name1" placeholder="ふりがな">
372
+
373
+ <input type="text" name="email" id="mumber" placeholder="電話番号">
374
+
375
+ <input type="text" name="email" id="email" placeholder="メールアドレス">
376
+
377
+
378
+
379
+
380
+
381
+ <!-- ▼郵便番号入力フィールド(7桁) -->
382
+
383
+ <div class="post-form">
384
+
385
+ <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
386
+
387
+ <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
388
+
389
+ </div>
390
+
391
+
392
+
393
+ <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
394
+
395
+ <div class="post">
396
+
397
+ <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
398
+
399
+ </div>
400
+
401
+ </div>
402
+
403
+ <div class="button">Next</div>
404
+
405
+ </fieldset>
406
+
407
+
408
+
409
+ <fieldset class="section" name="sec">
410
+
411
+ <h3>え</h3>
412
+
413
+ <input type="password" name="password" id="password" placeholder="Password">
414
+
415
+ <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
416
+
417
+
418
+
419
+
420
+
421
+ <div class="city-list-block">
422
+
423
+ <!-- <form class=action="" method="post">-->
424
+
425
+
426
+
427
+ <p>お</p>
428
+
429
+ <select name="country" class="country">
430
+
431
+
432
+
433
+ <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
434
+
435
+ <option value="Japan" class="japan">北海道</option>
436
+
437
+ <option value="America" class="America">青森県</option>
438
+
439
+ <option value="Australia" class="Australia">岩手県</option>
440
+
441
+
442
+
443
+ </select>
444
+
445
+ </div>
446
+
447
+
448
+
449
+ <input class="submit button" type="submit" value="送信">
450
+
451
+ </fieldset>
452
+
453
+ <fieldset class="section">
454
+
455
+ <h3>依頼完了!</h3>
456
+
457
+ <p>ご利用いただきありがとうございます。</p>
458
+
459
+
460
+
461
+ <div class="button">終了</div>
462
+
463
+ </fieldset>
464
+
465
+ </form>
466
+
467
+ </div>
468
+
469
+ </div>
470
+
471
+
472
+
473
+ <script src="aaa.js"></script>
474
+
475
+ </body>
476
+
477
+ </html>
478
+
479
+
480
+
481
+ ```