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

質問編集履歴

6

文法の修正

2018/03/13 09:09

投稿

panda
panda

スコア20

title CHANGED
@@ -1,1 +1,1 @@
1
- ラジオボタン押すと次のdivにスクロルす
1
+ jquery使ってペジ内遷移させ(animate)
body CHANGED
File without changes

5

文法の修正

2018/03/13 09:09

投稿

panda
panda

スコア20

title CHANGED
@@ -1,1 +1,1 @@
1
- ボタンを押すと次のdivにスクロールする
1
+ ラジオボタンを押すと次のdivにスクロールする
body CHANGED
File without changes

4

js追記

2018/03/13 08:29

投稿

panda
panda

スコア20

title CHANGED
File without changes
body CHANGED
@@ -26,7 +26,30 @@
26
26
  });
27
27
 
28
28
  ```
29
+ ```js
30
+ // ラジオボタン2段階で表示
31
+ document.addEventListener('change',function(e){
32
+ var t=e.target;
33
+ if(t.name=="move"){
34
+ Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){
35
+ if(x.id==t.value){
36
+ x.style.display="block";
37
+ Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){
38
+ y.checked=false;
39
+ });
40
+ }else{
41
+ x.style.display="none";
42
+ }
43
+ });
44
+ }
45
+ if(t.name=="grade"){
46
+ Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){
47
+ x.style.display=(x.id==t.value)?"block":"none";
48
+ });
49
+ }
50
+ });
29
51
 
52
+ ```
30
53
  ```html
31
54
  <div class="radio_button_box">
32
55
  <label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
@@ -79,6 +102,8 @@
79
102
  }
80
103
 
81
104
  ```
105
+
106
+
82
107
  htmlはdivで囲っています。classもidも入っています。
83
108
  簡単なコードで教えて頂ければと思います。
84
109
 

3

css追記

2018/03/13 07:46

投稿

panda
panda

スコア20

title CHANGED
File without changes
body CHANGED
@@ -42,6 +42,43 @@
42
42
  </div>
43
43
 
44
44
  ```
45
+
46
+ ```css
47
+ /* ラジオボタン */
48
+ [name=status_x] {
49
+ display: none;
50
+ }
51
+ [name=status_x]+div {
52
+ display: none;
53
+ }
54
+ [name=status_x]:checked+div {
55
+ display: block;
56
+ }
57
+ .second , .third{
58
+ display: none;
59
+ }
60
+
61
+ /* ラジオボタン用ボックス */
62
+ .radio_button_box {
63
+ border: solid 1px #6091d3;
64
+ padding: 10px 15px;
65
+ margin: 5px 0;
66
+ }
67
+ .second .arrow_down ,
68
+ .third .arrow_down {
69
+ margin: 20px 0;
70
+ }
71
+
72
+ /* わく */
73
+ .border-box-container2 {
74
+ border: solid 1px #cccccc;
75
+ margin-top: 10px;
76
+ padding: 0 20px 10px;
77
+ border-radius: 5px;
78
+ background-color: #f8f8f8;
79
+ }
80
+
81
+ ```
45
82
  htmlはdivで囲っています。classもidも入っています。
46
83
  簡単なコードで教えて頂ければと思います。
47
84
 

2

html修正

2018/03/13 07:44

投稿

panda
panda

スコア20

title CHANGED
File without changes
body CHANGED
@@ -28,6 +28,12 @@
28
28
  ```
29
29
 
30
30
  ```html
31
+ <div class="radio_button_box">
32
+ <label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
33
+ <label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
34
+ </div>
35
+
36
+
31
37
  <div class="second" id="radio_button_1">
32
38
  <div class="radio_button_box">
33
39
  <label><input type="radio" name="grade" value="e">あああ</label><br />
@@ -37,4 +43,10 @@
37
43
 
38
44
  ```
39
45
  htmlはdivで囲っています。classもidも入っています。
40
- 簡単なコードで教えて頂ければと思います。
46
+ 簡単なコードで教えて頂ければと思います。
47
+
48
+ ### 追記
49
+
50
+ 説明が不十分ですみません。
51
+ 上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
52
+ そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。

1

html追加

2018/03/13 07:23

投稿

panda
panda

スコア20

title CHANGED
File without changes
body CHANGED
@@ -26,5 +26,15 @@
26
26
  });
27
27
 
28
28
  ```
29
+
30
+ ```html
31
+ <div class="second" id="radio_button_1">
32
+ <div class="radio_button_box">
33
+ <label><input type="radio" name="grade" value="e">あああ</label><br />
34
+ <label><input type="radio" name="grade" value="b-2">いいい</label>
35
+ </div>
36
+ </div>
37
+
38
+ ```
29
39
  htmlはdivで囲っています。classもidも入っています。
30
40
  簡単なコードで教えて頂ければと思います。