質問編集履歴
1
jsのコード
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
jsでタブの切り替えをしたいです。切り替えは上手くいったのですが初期表示が全てのタブが出た状態になってしまっています。タブ1とその内容を初期表示としたいです。jQueryはまだ勉強中なので今回はJSだけで実装したいです
|
|
2
2
|
|
|
3
|
-
jsでタブの切り替えをしたいです。切り替えは上手くいったのですが初期表示が全てのタブが出た状態になってしまっています。タブ1とその内容を初期表示としたいです。
|
|
4
|
-
|
|
5
3
|
### 発生している問題・エラーメッセージ
|
|
6
4
|
|
|
7
5
|
```
|
|
@@ -11,7 +9,7 @@
|
|
|
11
9
|
### 該当のソースコード
|
|
12
10
|
|
|
13
11
|
```html
|
|
14
|
-
<div id="main">
|
|
12
|
+
コード<div id="main">
|
|
15
13
|
<h2 class="tab-bar">タブ切り替えメニュー</h2>
|
|
16
14
|
<ul id="tab_list" class="clearfix">
|
|
17
15
|
<li><a href="#tab1_box">タブ1</a></li>
|
|
@@ -30,7 +28,46 @@
|
|
|
30
28
|
</div>
|
|
31
29
|
</div>
|
|
32
30
|
</div>
|
|
31
|
+
```
|
|
32
|
+
```cSS
|
|
33
|
+
コード/* タブ部分のCSS */
|
|
34
|
+
ul#tab_list{
|
|
35
|
+
width : 600px;
|
|
36
|
+
margin : 20px auto 0 auto;
|
|
37
|
+
border-left : solid 1px #ccc;
|
|
38
|
+
}
|
|
39
|
+
ul#tab_list li{
|
|
40
|
+
float : left;
|
|
41
|
+
display : inline;
|
|
42
|
+
border : solid 1px #ccc;
|
|
43
|
+
border-left : none;
|
|
44
|
+
border-bottom : none;
|
|
45
|
+
}
|
|
46
|
+
ul#tab_list li a{
|
|
47
|
+
display : block;
|
|
48
|
+
text-align : center;
|
|
49
|
+
padding : 5px 10px;
|
|
50
|
+
font-size : 0.8em;
|
|
51
|
+
text-decoration : none;
|
|
52
|
+
outline : none;
|
|
53
|
+
}
|
|
54
|
+
ul#tab_list li a:hover{
|
|
55
|
+
background : #d0ffa2;
|
|
56
|
+
|
|
57
|
+
}
|
|
58
|
+
ul#tab_list li a.active{
|
|
59
|
+
background : #0cc6ef;
|
|
60
|
+
color : #fff;
|
|
61
|
+
}
|
|
62
|
+
div.tabbox{
|
|
63
|
+
border : solid 1px #ccc;
|
|
64
|
+
width : 579px;
|
|
65
|
+
margin : 0 auto;
|
|
66
|
+
padding : 10px;
|
|
67
|
+
}
|
|
33
68
|
|
|
69
|
+
|
|
70
|
+
```
|
|
34
71
|
```js
|
|
35
72
|
var tabs = document.getElementById('tab_list').getElementsByTagName('a');
|
|
36
73
|
var pages = document.getElementById('tabbody').getElementsByTagName('div');
|
|
@@ -60,7 +97,7 @@
|
|
|
60
97
|
}
|
|
61
98
|
|
|
62
99
|
|
|
63
|
-
|
|
100
|
+
```
|
|
64
101
|
### 試したこと
|
|
65
102
|
|
|
66
103
|
for文で一回タブ全部を消してからタブ１を表示するやり方でやったのですが上手く行かず、、上のコードで切り替えは実装できました。
|