teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Javascriptを使ったタグの切り替えの簡略化

編集履歴

質問編集履歴

6

コードの修正

2019/02/18 11:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,79 +6,7 @@
6
6
 
7
7
  for文を使うとは思うのですが、どうやって一つをクリックしたらそれ以外を非表示にする*タブを一つにまとめればいいのかわかりません。
8
8
 
9
- [このリンク](http://teratail.com/questions/137937)の方のJava部分を参考にしたのですが、どうしてもvar targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
10
9
 
11
- この部分でエラーが出ます。
12
-
13
- ```エラー
14
-
15
- Uncaught TypeError: Cannot read property 'substring' of undefined at HTMLUListElement.changeTab
16
-
17
- ```
18
-
19
- ```HTML
20
-
21
- <html>
22
-
23
- <body>
24
-
25
- <div class="title">
26
-
27
- <ul class="tab">
28
-
29
- <li id="art"><div id="test">Art</div></li>
30
-
31
- <li id="science"><div id="test">Science</div></li>
32
-
33
- <li id="math"><div id="test">Math</div></li>
34
-
35
- </ul>
36
-
37
-
38
-
39
- <div class="tab_content" id="art_content">
40
-
41
- <ul>
42
-
43
- <li>art</li>
44
-
45
- </ul>
46
-
47
- </div>
48
-
49
- <div class="tab_content" id="science_content">
50
-
51
- <ul>
52
-
53
- <li>science</li>
54
-
55
- </ul>
56
-
57
- </div>
58
-
59
- <div class="tab_content" id="math_content">
60
-
61
- <ul>
62
-
63
- <li>math</li>
64
-
65
- </ul>
66
-
67
- </div>
68
-
69
- </div>
70
-
71
- <script src=""></script>
72
-
73
- </body>
74
-
75
- </html>
76
-
77
-
78
-
79
- ```
80
-
81
- 試したコードはこちらです（色の切り替えは抜きです）。
82
10
 
83
11
  ```Javascript
84
12
 

5

初心者マークの追加

2019/02/18 11:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

4

エラー内容の追加。

2019/02/18 01:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,12 @@
10
10
 
11
11
  この部分でエラーが出ます。
12
12
 
13
+ ```エラー
14
+
15
+ Uncaught TypeError: Cannot read property 'substring' of undefined at HTMLUListElement.changeTab
16
+
17
+ ```
18
+
13
19
  ```HTML
14
20
 
15
21
  <html>
@@ -20,11 +26,11 @@
20
26
 
21
27
  <ul class="tab">
22
28
 
23
- <li id="art">Art</li>
29
+ <li id="art"><div id="test">Art</div></li>
24
30
 
25
- <li id="science">Science</li>
31
+ <li id="science"><div id="test">Science</div></li>
26
32
 
27
- <li id="math">Math</li>
33
+ <li id="math"><div id="test">Math</div></li>
28
34
 
29
35
  </ul>
30
36
 
@@ -72,163 +78,7 @@
72
78
 
73
79
  ```
74
80
 
75
- ```Javascript
76
-
77
- var str=document.getElementById('art_content');
78
-
79
- var str2=document.getElementById('science_content');
80
-
81
- var str3=document.getElementById('math_content');
82
-
83
-
84
-
85
- target=document.getElementById('art');
86
-
87
- target2=document.getElementById('science');
88
-
89
- target3=document.getElementById('math');
90
-
91
-
92
-
93
-
94
-
95
- document.getElementById('art').onclick=function(e){
96
-
97
- str.style.display="none";
98
-
99
- str2.style.display="none";
100
-
101
- str3.style.display="none";
102
-
103
- if(str.style.display=="none"){
104
-
105
- str.style.display="block";
106
-
107
- target.style.backgroundColor="#F9F9F9"
108
-
109
- target.style.color="#000";
110
-
111
- target.style.borderTop="1px solid #F0F0F0";
112
-
113
- target.style.borderRight=" 1px solid #F0F0F0";
114
-
115
- target.style.borderBottom="1px solid #F9F9F9";
116
-
117
- target.style.borderLeft="1px solid #F0F0F0";
118
-
119
- target2.style.backgroundColor="#333"
120
-
121
- target2.style.color="#F0F0F0"
122
-
123
- target3.style.backgroundColor="#333"
124
-
125
- target3.style.color="#F0F0F0"
126
-
127
- }else{
128
-
129
- str2.style.display="none";
130
-
131
- str3.style.display="none";
132
-
133
- }
134
-
135
- }
136
-
137
-
138
-
139
- document.getElementById('science').onclick=function(e){
140
-
141
- str2.style.display="none";
142
-
143
- str.style.display="none";
144
-
145
- str3.style.display="none";
146
-
147
- if(str2.style.display=="none"){
148
-
149
- str2.style.display="block";
150
-
151
- target2.style.backgroundColor="#F9F9F9"
152
-
153
- target2.style.color="#000";
154
-
155
- target2.style.borderTop="1px solid #F0F0F0";
156
-
157
- target2.style.borderRight=" 1px solid #F0F0F0";
158
-
159
- target2.style.borderBottom="1px solid #F9F9F9";
160
-
161
- target2.style.borderLeft="1px solid #F0F0F0";
162
-
163
- target.style.backgroundColor="#333"
164
-
165
- target.style.color="#F0F0F0"
166
-
167
- target3.style.backgroundColor="#333"
168
-
169
- target3.style.color="#F0F0F0"
170
-
171
- }else{
172
-
173
- str.style.display="none";
174
-
175
- str3.style.display="none";
176
-
177
- }
178
-
179
- }
180
-
181
-
182
-
183
- document.getElementById('math').onclick=function(e){
184
-
185
- str3.style.display="none";
186
-
187
- str2.style.display="none";
188
-
189
- str.style.display="none"
81
+ 試したコードはこちらです（色の切り替えは抜きです）。
190
-
191
- if(str3.style.display=="none"){
192
-
193
- str3.style.display="block";
194
-
195
- target3.style.backgroundColor="#F9F9F9"
196
-
197
- target3.style.backgroundImage="initial"
198
-
199
- target3.style.borderTop="1px solid #F0F0F0";
200
-
201
- target3.style.borderRight=" 1px solid #F0F0F0";
202
-
203
- target3.style.borderBottom="1px solid #F9F9F9";
204
-
205
- target3.style.borderLeft="1px solid #F0F0F0";
206
-
207
- target3.style.color="#000";
208
-
209
- target2.style.backgroundColor="#333"
210
-
211
- target2.style.color="#F0F0F0"
212
-
213
- target.style.backgroundColor="#333"
214
-
215
- target.style.color="#F0F0F0"
216
-
217
- }else{
218
-
219
- str.style.display="none";
220
-
221
- str2.style.display="none";
222
-
223
- }
224
-
225
- }
226
-
227
-
228
-
229
- ```
230
-
231
- 試したコードはこちらです（色の切り替えは抜きです）。エラーは吐きませんが、アコーディオンのように、tabをクリックしたらtab_contentが全て消え、もう一度クリックするとtab_contentが全て表示されます。
232
82
 
233
83
  ```Javascript
234
84
 
@@ -256,9 +106,11 @@
256
106
 
257
107
  function changeTab(){
258
108
 
109
+ var targetid = this.div.substring(this.div.indexOf('#')+1,this.div.length);
110
+
259
111
  for(var i=0; i<pages.length; i++){
260
112
 
261
- if(pages[i].style.display=="none"){
113
+ if(pages[I].id !=targetid){
262
114
 
263
115
  pages[i].style.display="block";
264
116
 

3

文法の修正

2019/02/18 01:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -228,7 +228,7 @@
228
228
 
229
229
  ```
230
230
 
231
- 試したコードはこちらです（色の切り替えは抜きです）。エラーは吐きませんが、タブは切り替わりません。
231
+ 試したコードはこちらです（色の切り替えは抜きです）。エラーは吐きませんが、アコーディオンのように、tabをクリックしたらtab_contentが全て消え、もう一度クリックするとtab_contentが全て表示されます。
232
232
 
233
233
  ```Javascript
234
234
 
@@ -260,12 +260,12 @@
260
260
 
261
261
  if(pages[i].style.display=="none"){
262
262
 
263
+ pages[i].style.display="block";
264
+
265
+ }else{
266
+
263
267
  pages[i].style.display="none";
264
268
 
265
- }else{
266
-
267
- pages[i].style.display="block";
268
-
269
269
  }
270
270
 
271
271
  }return false;

2

試したコードを追加しました。

2019/02/18 01:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- <div class="tab" id="art_content">
33
+ <div class="tab_content" id="art_content">
34
34
 
35
35
  <ul>
36
36
 
@@ -40,7 +40,7 @@
40
40
 
41
41
  </div>
42
42
 
43
- <div class="tab" id="science_content">
43
+ <div class="tab_content" id="science_content">
44
44
 
45
45
  <ul>
46
46
 
@@ -50,7 +50,7 @@
50
50
 
51
51
  </div>
52
52
 
53
- <div class="tab" id="math_content">
53
+ <div class="tab_content" id="math_content">
54
54
 
55
55
  <ul>
56
56
 
@@ -228,4 +228,48 @@
228
228
 
229
229
  ```
230
230
 
231
- タブは三つあります。任せるような形になってしまうので、ヒントでも助かります、お願いします。
231
+ 試したコードはこちらです（色の切り替えは抜きです）。エラーは吐きませんが、タブは切り替わりません。
232
+
233
+ ```Javascript
234
+
235
+ var tabs = document.getElementsByClassName('tab');
236
+
237
+ var pages = document.getElementsByClassName('tab_content');
238
+
239
+
240
+
241
+ window.onload = setTab;
242
+
243
+
244
+
245
+ function setTab(){
246
+
247
+ for(var i=0; i<tabs.length; i++){
248
+
249
+ tabs[i].onclick = changeTab;
250
+
251
+ }
252
+
253
+ }
254
+
255
+
256
+
257
+ function changeTab(){
258
+
259
+ for(var i=0; i<pages.length; i++){
260
+
261
+ if(pages[i].style.display=="none"){
262
+
263
+ pages[i].style.display="none";
264
+
265
+ }else{
266
+
267
+ pages[i].style.display="block";
268
+
269
+ }
270
+
271
+ }return false;
272
+
273
+ }
274
+
275
+ ```

1

HTMLの追加

2019/02/18 01:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,67 @@
10
10
 
11
11
  この部分でエラーが出ます。
12
12
 
13
-
13
+ ```HTML
14
+
15
+ <html>
16
+
17
+ <body>
18
+
19
+ <div class="title">
20
+
21
+ <ul class="tab">
22
+
23
+ <li id="art">Art</li>
24
+
25
+ <li id="science">Science</li>
26
+
27
+ <li id="math">Math</li>
28
+
29
+ </ul>
30
+
31
+
32
+
33
+ <div class="tab" id="art_content">
34
+
35
+ <ul>
36
+
37
+ <li>art</li>
38
+
39
+ </ul>
40
+
41
+ </div>
42
+
43
+ <div class="tab" id="science_content">
44
+
45
+ <ul>
46
+
47
+ <li>science</li>
48
+
49
+ </ul>
50
+
51
+ </div>
52
+
53
+ <div class="tab" id="math_content">
54
+
55
+ <ul>
56
+
57
+ <li>math</li>
58
+
59
+ </ul>
60
+
61
+ </div>
62
+
63
+ </div>
64
+
65
+ <script src=""></script>
66
+
67
+ </body>
68
+
69
+ </html>
70
+
71
+
72
+
73
+ ```
14
74
 
15
75
  ```Javascript
16
76