質問編集履歴

1

該当のソースコードのCSSを分離させました

2021/10/08 13:29

投稿

emi_ono
emi_ono

スコア84

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ラジオボタンで選択肢から一つの値を選択すると、値を保持したまま同じページ内の特定部分へジャンプできるようにしたいです。
4
4
 
5
- 例えば、「梅」を選択すると、「梅」のボタンは緑のまま「ここに飛ぶ」まで移動し、submitで値をPOSTできるようにするには、どのような方法があるでしょうか。どうぞよろしくお願いします。
5
+ 例えば、「梅」を選択すると、「梅」のボタンは緑のまま「ここに飛ぶ」まで移動し(ページ内リンク)、submitで値をPOSTできるようにするには、どのような方法があるでしょうか。どうぞよろしくお願いします。
6
6
 
7
7
 
8
8
 
@@ -16,11 +16,109 @@
16
16
 
17
17
 
18
18
 
19
- ```PHP
19
+ ```HTML
20
20
 
21
21
  <html>
22
22
 
23
+ <body>
24
+
25
+ <form method="POST" action="./check.php">
26
+
27
+ <div class="sample">
28
+
29
+ <input type="radio" name="s3" id="select1" value="1" checked="">
30
+
31
+ <label for="select1">みかん</label>
32
+
33
+ <input type="radio" name="s3" id="select2" value="2">
34
+
35
+ <label for="select2">梅</label>
36
+
37
+ <input type="radio" name="s3" id="select3" value="3">
38
+
39
+ <label for="select3">ラーメン</label>
40
+
41
+ <input type="radio" name="s3" id="select4" value="4">
42
+
43
+ <label for="select4">パンダ</label>
44
+
45
+ <input type="radio" name="s3" id="select5" value="5">
46
+
47
+ <label for="select5">高野山</label>
48
+
49
+ </div>
50
+
51
+ <br>
52
+
53
+ </p>↓</p>
54
+
55
+ </p>↓</p>
56
+
57
+ </p>↓</p>
58
+
59
+ </p>↓</p>
60
+
61
+ </p>↓</p>
62
+
63
+ </p>↓</p>
64
+
65
+ </p>↓</p>
66
+
67
+ </p>↓</p>
68
+
69
+ </p>↓</p>
70
+
71
+ </p>↓</p>
72
+
73
+ </p>↓</p>
74
+
75
+ </p>↓</p>
76
+
77
+ </p>↓</p>
78
+
79
+ </p>↓</p>
80
+
81
+ </p>↓</p>
82
+
83
+ </p>↓</p>
84
+
85
+ </p>↓</p>
86
+
87
+ </p>↓</p>
88
+
89
+ </p>↓</p>
90
+
91
+
92
+
93
+ <div id="contactform"><p>ここに飛ぶ</p></div>
94
+
95
+ <input type="hidden" name="shop_id" value="13">
96
+
97
+ <input type="submit" value="確認画面" class="submit">
98
+
99
+ </form>
100
+
101
+ </body>
102
+
103
+ </html>
104
+
23
- <style>
105
+ <script>
106
+
107
+ $(document).on('click','.sample label ', function(){
108
+
109
+ $("html,body").animate({
110
+
111
+ scrollTop:$('#contactform').offset().top
112
+
113
+ },300);
114
+
115
+ });
116
+
117
+ </script>
118
+
119
+ ```
120
+
121
+ ```css
24
122
 
25
123
  .sample input{
26
124
 
@@ -80,105 +178,21 @@
80
178
 
81
179
  }
82
180
 
83
- </style>
84
-
85
- <body>
86
-
87
- <form method="POST" action="./check.php">
88
-
89
- <div class="sample">
90
-
91
- <input type="radio" name="s3" id="select1" value="1" checked="">
92
-
93
- <label for="select1">みかん</label>
94
-
95
- <input type="radio" name="s3" id="select2" value="2">
96
-
97
- <label for="select2">梅</label>
98
-
99
- <input type="radio" name="s3" id="select3" value="3">
100
-
101
- <label for="select3">ラーメン</label>
102
-
103
- <input type="radio" name="s3" id="select4" value="4">
104
-
105
- <label for="select4">パンダ</label>
106
-
107
- <input type="radio" name="s3" id="select5" value="5">
108
-
109
- <label for="select5">高野山</label>
110
-
111
- </div>
112
-
113
- <br>
114
-
115
- </p>↓</p>
116
-
117
- </p>↓</p>
118
-
119
- </p>↓</p>
120
-
121
- </p>↓</p>
122
-
123
- </p>↓</p>
124
-
125
- </p>↓</p>
126
-
127
- </p>↓</p>
128
-
129
- </p>↓</p>
130
-
131
- </p>↓</p>
132
-
133
- </p>↓</p>
134
-
135
- </p>↓</p>
136
-
137
- </p>↓</p>
138
-
139
- </p>↓</p>
140
-
141
- </p>↓</p>
142
-
143
- </p>↓</p>
144
-
145
- </p>↓</p>
146
-
147
- </p>↓</p>
148
-
149
- </p>↓</p>
150
-
151
- </p>↓</p>
152
-
153
-
154
-
155
- <div id="contactform"><p>ここに飛ぶ</p></div>
156
-
157
- <input type="hidden" name="shop_id" value="13">
158
-
159
- <input type="submit" value="確認画面" class="submit">
160
-
161
- </form>
162
-
163
- </body>
164
-
165
- </html>
166
-
167
181
  ```
168
182
 
169
183
 
170
184
 
171
- ### 試したこと1
185
+ ### 試したこと
172
-
173
-
174
-
186
+
187
+
188
+
175
- 下記のコードを追して試したのですが、上手くませんでした
189
+ <label>の文字を<a>タグで囲んで、下記のコードを追して、上ませんでした
176
190
 
177
191
  ```javascript
178
192
 
179
193
  <script>
180
194
 
181
- $(document).on('click','.sample label ', function(){
195
+ $(document).on('click','.sample label a', function(){
182
196
 
183
197
  $("html,body").animate({
184
198
 
@@ -191,27 +205,3 @@
191
205
  </script>
192
206
 
193
207
  ```
194
-
195
- ### 試したこと2
196
-
197
-
198
-
199
- <label>の文字を<a>タグで囲んで、下記のコードを追加しても、上手く動きませんでした
200
-
201
- ```javascript
202
-
203
- <script>
204
-
205
- $(document).on('click','.sample label a', function(){
206
-
207
- $("html,body").animate({
208
-
209
- scrollTop:$('#contactform').offset().top
210
-
211
- },300);
212
-
213
- });
214
-
215
- </script>
216
-
217
- ```