質問編集履歴
7
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -78,6 +78,8 @@
|
|
|
78
78
|
|
|
79
79
|
まだコードは書いてない状態でどう実装しようか考えてるところなのでサンプルをかいてみました
|
|
80
80
|
|
|
81
|
+
下側のラジオボタンを非表示disabeldにして
|
|
82
|
+
|
|
81
83
|
label クリック時に２つのラジオボタンをクローンのように同時に変更できれば実現できるかなと思ったのですが…
|
|
82
84
|
|
|
83
85
|
これはもちろん手動で変更しないとコンテンツは切り替わりません
|
6
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -80,6 +80,8 @@
|
|
|
80
80
|
|
|
81
81
|
label クリック時に２つのラジオボタンをクローンのように同時に変更できれば実現できるかなと思ったのですが…
|
|
82
82
|
|
|
83
|
+
これはもちろん手動で変更しないとコンテンツは切り替わりません
|
|
84
|
+
|
|
83
85
|
```
|
|
84
86
|
|
|
85
87
|
<style>
|
5
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -67,3 +67,55 @@
|
|
|
67
67
|
|
|
68
68
|
|
|
69
69
|
またCSSだけで不可能な場合JSを使う必要があるとしてどの部分にJSをかくのが一番きれいでしょうか
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
### サンプルコード
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
まだコードは書いてない状態でどう実装しようか考えてるところなのでサンプルをかいてみました
|
|
80
|
+
|
|
81
|
+
label クリック時に２つのラジオボタンをクローンのように同時に変更できれば実現できるかなと思ったのですが…
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
<style>
|
|
86
|
+
|
|
87
|
+
.tab-pane-radio {
|
|
88
|
+
|
|
89
|
+
// display:none; // 本当は非表示
|
|
90
|
+
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.tab-pane-radio:not(:checked) + * {
|
|
94
|
+
|
|
95
|
+
display:none;
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
</style>
|
|
100
|
+
|
|
101
|
+
<div>
|
|
102
|
+
|
|
103
|
+
<input type="radio" name="tab" value="circle" id="tab_circle"><label for="tab_circle">ラベル</label>
|
|
104
|
+
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div>
|
|
108
|
+
|
|
109
|
+
<input type="radio" name="tab" value="rect" id="tab_circle"><label for="tab_rect">ラベル</label>
|
|
110
|
+
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<input type="radio" name="content" value="circle" id="content_circle" class="tab-pane-radio">
|
|
114
|
+
|
|
115
|
+
<div>circle 入力フォーム</div>
|
|
116
|
+
|
|
117
|
+
<input type="radio" name="content" value="rect" id="content_rect" class="tab-pane-radio">
|
|
118
|
+
|
|
119
|
+
<div>rect 入力フォーム</div>
|
|
120
|
+
|
|
121
|
+
```
|
4
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -48,9 +48,9 @@
|
|
|
48
48
|
|
|
49
49
|
ラジオボタンをタブとして使う記事はよくでてくるのですが
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
ラジオボタンとコンテンツを同一階層に並べて `:checked ~ *` で表示を切り替える方法と
|
|
52
52
|
|
|
53
|
-
コンテンツをラジオボタンの直後に配置して :checkde+*で表示を切り替える方法がでてくるのですが
|
|
53
|
+
コンテンツをラジオボタンの直後に配置して `:checkde+*` で表示を切り替える方法がでてくるのですが
|
|
54
54
|
|
|
55
55
|
前者は bootstrap をあてるためには <div class="radio"></div> の中にラジオボタンを配置する必要があり使えず、
|
|
56
56
|
|
3
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -48,11 +48,15 @@
|
|
|
48
48
|
|
|
49
49
|
ラジオボタンをタブとして使う記事はよくでてくるのですが
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
上位階層にラジオボタンを並べて `:checked ~ *` で表示を切り替える方法と
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
コンテンツをラジオボタンの直後に配置して :checkde+*で表示を切り替える方法がでてくるのですが
|
|
54
54
|
|
|
55
|
+
前者は bootstrap をあてるためには <div class="radio"></div> の中にラジオボタンを配置する必要があり使えず、
|
|
56
|
+
|
|
57
|
+
後者は absolute でレイアウトを調整する必要があり
|
|
58
|
+
|
|
55
|
-
|
|
59
|
+
表示サイズや要素サイズによって表示が崩れたりするのであまりやりたくありません
|
|
56
60
|
|
|
57
61
|
|
|
58
62
|
|
2
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
- タブのような感じでラジオボタンを使い、ラジオボタンの状態によって以降の表示を切り替えたい
|
|
10
|
+
|
|
11
|
+
（UI表示はラジオボタンのまま）
|
|
10
12
|
|
|
11
13
|
- 送信時にはラジオボタンの状態も送信したい
|
|
12
14
|
|
1
質問内容の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -60,4 +60,4 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
CSSだけで不可能な場合JSを使う必要があるとしてどの部分にJSをかくのが一番きれいでしょうか
|
|
63
|
+
またCSSだけで不可能な場合JSを使う必要があるとしてどの部分にJSをかくのが一番きれいでしょうか
|