質問編集履歴
7
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -257,8 +257,7 @@
|
|
|
257
257
|
|
|
258
258
|
|
|
259
259
|
|
|
260
|
-
<div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"></iframe>
|
|
260
|
+
<div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"></iframe><p id="tabNo">タブ99</p>
|
|
261
|
-
|
|
262
261
|
|
|
263
262
|
|
|
264
263
|
</div>
|
6
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
5
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
先程質問させて頂いた件の続きです。
|
|
2
|
-
Htmlで各ページを変える時にタブを押すことでページを変えるのですが、
|
|
3
|
-
ページを切り替えるラベルとタブイメージを切り替えるラベルが共存出来なくて、別々の表記になっています。
|
|
4
|
-
つまり、タブ切り替えに対応したラベルを押しても、タブが切り替わるだけで、ページは切り替わりません。その逆も同じで、ページ切り替わるラベルはタブが切り替わりません。
|
|
5
|
-
|
|
2
|
+
Htmlでタブを変えると同時にページも変えたいのですが、タブが変わっても、ページが変わりません。どのように記述すれば良いでしょうか?
|
|
6
3
|
お力添えください。
|
|
7
4
|
|
|
8
5
|
|
4
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,123 +5,231 @@
|
|
|
5
5
|
同じラベルで、両方動かしたい（タブ切り替えとページ切り替え）のですが、どのように記述すれば良いでしょうか?
|
|
6
6
|
お力添えください。
|
|
7
7
|
|
|
8
|
+
|
|
8
9
|
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
9
10
|
|
|
11
|
+
|
|
12
|
+
|
|
10
13
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
11
14
|
|
|
12
15
|
|
|
13
16
|
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
14
20
|
<head>
|
|
15
21
|
|
|
16
22
|
|
|
17
23
|
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
18
27
|
<style type="text/css">
|
|
19
28
|
|
|
29
|
+
|
|
30
|
+
|
|
20
31
|
/* --- タブ（ラジオボタン）のエリア ------------------------ */
|
|
21
32
|
|
|
33
|
+
|
|
34
|
+
|
|
22
35
|
#tabArea{
|
|
23
36
|
|
|
37
|
+
|
|
38
|
+
|
|
24
39
|
line-height : 1; /* 1行の高さ */
|
|
25
40
|
|
|
41
|
+
|
|
42
|
+
|
|
26
43
|
letter-spacing : 0; /* 文字間 */
|
|
27
44
|
|
|
45
|
+
|
|
46
|
+
|
|
28
47
|
text-align : center; /* 文字位置は中央 */
|
|
29
48
|
|
|
49
|
+
|
|
50
|
+
|
|
30
51
|
}
|
|
31
52
|
|
|
53
|
+
|
|
32
54
|
|
|
33
|
-
|
|
55
|
+
|
|
34
56
|
|
|
57
|
+
/* --- ラジオボタン ---------------------------------------- */
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
35
61
|
#tabArea input[type=radio] {
|
|
36
62
|
|
|
63
|
+
|
|
64
|
+
|
|
37
65
|
display : none; /* ラジオボタン非表示 */
|
|
38
66
|
|
|
67
|
+
|
|
68
|
+
|
|
39
69
|
}
|
|
40
70
|
|
|
71
|
+
|
|
41
72
|
|
|
42
|
-
|
|
73
|
+
|
|
43
74
|
|
|
75
|
+
/* --- ラジオボタン直後のlabel ----------------------------- */
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
44
79
|
#tabArea input[type=radio] + label {
|
|
45
80
|
|
|
81
|
+
|
|
82
|
+
|
|
46
83
|
display : inline-block;
|
|
47
84
|
|
|
85
|
+
|
|
86
|
+
|
|
48
87
|
position : relative;
|
|
49
88
|
|
|
89
|
+
|
|
90
|
+
|
|
50
91
|
padding : 6px 10px; /* labelの余白 */
|
|
51
92
|
|
|
93
|
+
|
|
94
|
+
|
|
52
95
|
font-size : 12pt; /* タブの文字サイズ */
|
|
53
96
|
|
|
97
|
+
|
|
98
|
+
|
|
54
99
|
font-weight : bold; /* タブは太文字 */
|
|
55
100
|
|
|
101
|
+
|
|
102
|
+
|
|
56
103
|
border : 3px solid #999; /* 未選択タブのの枠線 */
|
|
57
104
|
|
|
105
|
+
|
|
106
|
+
|
|
58
107
|
border-bottom : none; /* 下罫線は消す */
|
|
59
108
|
|
|
109
|
+
|
|
110
|
+
|
|
60
111
|
border-radius : 5px 5px 0 0; /* タブの上左右角丸 */
|
|
61
112
|
|
|
113
|
+
|
|
114
|
+
|
|
62
115
|
margin : 0 1px; /* タブ間隔 */
|
|
63
116
|
|
|
117
|
+
|
|
118
|
+
|
|
64
119
|
background : #fff; /* 未選択タブの背景色 */
|
|
65
120
|
|
|
121
|
+
|
|
122
|
+
|
|
66
123
|
color : #666; /* 未選択タブの文字色 */
|
|
67
124
|
|
|
125
|
+
|
|
126
|
+
|
|
68
127
|
}
|
|
69
128
|
|
|
129
|
+
|
|
70
130
|
|
|
71
|
-
|
|
131
|
+
|
|
72
132
|
|
|
133
|
+
/* --- 選択されたラジオボタン直後のlabel ------------------- */
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
73
137
|
#tabArea input[type=radio]:checked + label {
|
|
74
138
|
|
|
139
|
+
|
|
140
|
+
|
|
75
141
|
border-color : #4682B4; /* 選択タブの枠線 */
|
|
76
142
|
|
|
143
|
+
|
|
144
|
+
|
|
77
145
|
color : #4682B4; /* 選択タブの文字色 */
|
|
78
146
|
|
|
147
|
+
|
|
148
|
+
|
|
79
149
|
cursor : default; /* デフォルトカーソル */
|
|
80
150
|
|
|
151
|
+
|
|
152
|
+
|
|
81
153
|
z-index : 2; /* 重なりを最前面へ */
|
|
82
154
|
|
|
155
|
+
|
|
156
|
+
|
|
83
157
|
}
|
|
84
158
|
|
|
159
|
+
|
|
85
160
|
|
|
86
|
-
|
|
161
|
+
|
|
87
162
|
|
|
163
|
+
/* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
88
167
|
#tabArea input[type="radio"]:not(:checked) + label:hover {
|
|
89
168
|
|
|
169
|
+
|
|
170
|
+
|
|
90
171
|
background : #b4cee2; /* カーソルタブの背景 */
|
|
91
172
|
|
|
173
|
+
|
|
174
|
+
|
|
92
175
|
cursor : pointer; /* リンクカーソル */
|
|
93
176
|
|
|
177
|
+
|
|
178
|
+
|
|
94
179
|
}
|
|
95
180
|
|
|
181
|
+
|
|
96
182
|
|
|
97
|
-
|
|
183
|
+
|
|
98
184
|
|
|
185
|
+
/* --- タブ下の本体エリア ---------------------------------- */
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
99
189
|
.tabBody{
|
|
100
190
|
|
|
191
|
+
|
|
192
|
+
|
|
101
193
|
position : relative;
|
|
102
194
|
|
|
195
|
+
|
|
196
|
+
|
|
103
197
|
border : 3px solid #4682B4; /* 本体の枠線 */
|
|
104
198
|
|
|
199
|
+
|
|
200
|
+
|
|
105
201
|
background : #fff; /* 本体の背景色 */
|
|
106
202
|
|
|
203
|
+
|
|
204
|
+
|
|
107
205
|
margin-top : -3px; /* タブと罫線分重ねる */
|
|
108
206
|
|
|
207
|
+
|
|
208
|
+
|
|
109
209
|
z-index : 1; /* 未選択タブより全面 */
|
|
110
210
|
|
|
211
|
+
|
|
212
|
+
|
|
111
213
|
}
|
|
112
214
|
|
|
215
|
+
|
|
216
|
+
|
|
113
217
|
.auto-style1 {
|
|
114
218
|
|
|
219
|
+
|
|
220
|
+
|
|
115
221
|
font-size: xx-small;
|
|
116
222
|
|
|
223
|
+
|
|
224
|
+
|
|
117
225
|
}
|
|
118
226
|
|
|
227
|
+
|
|
228
|
+
|
|
119
229
|
</style>
|
|
120
230
|
|
|
121
231
|
|
|
122
232
|
|
|
123
|
-
|
|
124
|
-
|
|
125
233
|
</head>
|
|
126
234
|
|
|
127
235
|
|
|
@@ -132,65 +240,67 @@
|
|
|
132
240
|
|
|
133
241
|
<div id="tabArea">
|
|
134
242
|
|
|
243
|
+
|
|
135
244
|
|
|
136
|
-
|
|
245
|
+
<input type="radio" name="tab" id="tab1" onclick="tabClick(1)">
|
|
137
246
|
|
|
138
|
-
|
|
247
|
+
<label for="tab1">メニュー１<a target="Change" href="表示したいurl１"></a></label>
|
|
139
248
|
|
|
140
|
-
|
|
249
|
+
|
|
141
250
|
|
|
251
|
+
<input type="radio" name="tab" id="tab2" onclick="tabClick(2)">
|
|
142
252
|
|
|
143
|
-
|
|
253
|
+
<label for="tab2">メニュー２<a target="Change" 表示したいurl2"></a></label>
|
|
144
254
|
|
|
145
|
-
|
|
255
|
+
|
|
146
256
|
|
|
147
|
-
|
|
257
|
+
<input type="radio" name="tab" id="tab3" onclick="tabClick(3)">
|
|
148
258
|
|
|
149
|
-
|
|
259
|
+
<label for="tab3">TOPへ戻る<a target="Change"最初に表示したいurl"></a></label>
|
|
150
260
|
|
|
151
|
-
|
|
261
|
+
|
|
152
262
|
|
|
153
|
-
|
|
263
|
+
<div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"></iframe>
|
|
154
264
|
|
|
155
|
-
|
|
265
|
+
|
|
156
266
|
|
|
267
|
+
</div>
|
|
268
|
+
|
|
157
269
|
|
|
158
270
|
|
|
159
|
-
<div class="tabBody"><p><iframe src="最初に表示したいurl"name="Change"scrolling="auto"frameborder="0"</iframe style="width: 752px; height: 259px" target="_blank">
|
|
160
271
|
|
|
161
|
-
<
|
|
272
|
+
<script type="text/javascript">
|
|
162
273
|
|
|
163
274
|
|
|
164
275
|
|
|
165
|
-
|
|
276
|
+
function tabClick(argTabNo) {
|
|
166
277
|
|
|
167
|
-
|
|
278
|
+
document.getElementById("tabNo").innerHTML = "タブ" + argTabNo;
|
|
168
279
|
|
|
169
280
|
|
|
170
281
|
|
|
171
|
-
|
|
282
|
+
}
|
|
172
283
|
|
|
173
284
|
|
|
174
285
|
|
|
286
|
+
</script>
|
|
287
|
+
|
|
175
288
|
|
|
176
289
|
|
|
177
|
-
<
|
|
290
|
+
</body>
|
|
178
291
|
|
|
179
|
-
|
|
292
|
+
|
|
180
293
|
|
|
181
|
-
document.getElementById("tabNo").innerHTML = "タブ" + argTabNo;
|
|
182
294
|
|
|
183
|
-
|
|
295
|
+
|
|
184
296
|
|
|
185
|
-
|
|
297
|
+
|
|
186
298
|
|
|
187
|
-
</body>
|
|
188
299
|
|
|
189
300
|
|
|
190
301
|
|
|
302
|
+
</html>
|
|
191
303
|
|
|
192
304
|
|
|
193
305
|
|
|
194
|
-
</html>
|
|
195
|
-
|
|
196
306
|
```
|
3
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,9 +5,8 @@
|
|
|
5
5
|
同じラベルで、両方動かしたい（タブ切り替えとページ切り替え）のですが、どのように記述すれば良いでしょうか?
|
|
6
6
|
お力添えください。
|
|
7
7
|
|
|
8
|
+
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
8
9
|
|
|
9
|
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
10
|
-
|
|
11
10
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
12
11
|
|
|
13
12
|
|
|
@@ -193,5 +192,5 @@
|
|
|
193
192
|
|
|
194
193
|
|
|
195
194
|
</html>
|
|
196
|
-
|
|
195
|
+
|
|
197
196
|
```
|