タブ切り替え　初期表示設定ををJSだけで行いたい

jsでタブの切り替えをしたいです。切り替えは上手くいったのですが初期表示が全てのタブが出た状態になってしまっています。タブ1とその内容を初期表示としたいです。jQueryはまだ勉強中なので今回はJSだけで実装したいです

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1コード<div id="main">
2            <h2 class="tab-bar">タブ切り替えメニュー</h2>
3            <ul id="tab_list" class="clearfix">
4              <li><a href="#tab1_box">タブ1</a></li>
5              <li><a href="#tab2_box">タブ2</a></li>
6             <li><a href="#tab3_box">タブ3</a></li>
7           </ul>
8            <div id="tabbody">  
9           <div id="tab1_box" class="tabbox">
10             タブ1の内容が表示されます。
11           </div>
12           <div id="tab2_box" class="tabbox">
13             タブ2の内容が表示されます。
14           </div>
15           <div id="tab3_box" class="tabbox">
16             タブ3の内容が表示されます。
17           </div>
18              </div>
19         </div>

cSS
1コード/* タブ部分のCSS */
2ul#tab_list{
3  width : 600px;
4  margin : 20px auto 0 auto;
5  border-left : solid 1px #ccc;
6}
7ul#tab_list li{
8  float : left;
9  display : inline;
10  border : solid 1px #ccc;
11  border-left : none;
12  border-bottom : none;
13}
14ul#tab_list li a{
15  display : block;
16  text-align : center;
17  padding : 5px 10px;
18  font-size : 0.8em;
19  text-decoration : none;
20  outline : none;
21}
22ul#tab_list li a:hover{
23  background : #d0ffa2;
24  
25}
26ul#tab_list li a.active{
27  background : #0cc6ef;
28  color : #fff;
29}
30div.tabbox{
31  border : solid 1px #ccc;
32  width : 579px;
33  margin : 0 auto;
34  padding : 10px;
35}
36
37

js
1var tabs = document.getElementById('tab_list').getElementsByTagName('a');
2var pages = document.getElementById('tabbody').getElementsByTagName('div');
3
4window.onload = setTab;
5
6function setTab() {
7  for(var i=0; i<tabs.length; i++) {
8    tabs[i].onclick = changeTab;
9  }
10}
11
12
13function changeTab() {
14  var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
15
16  for(var i=0; i<pages.length; i++) {
17    if( pages[i].id != targetid ) {
18        pages[i].style.display = "none";
19    }
20    else {
21        pages[i].style.display = "block";
22    }
23  }
24
25  return false;
26 }
27
28

試したこと

for文で一回タブ全部を消してからタブ１を表示するやり方でやったのですが上手く行かず、、上のコードで切り替えは実装できました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

元ソースをある程度考慮してたとえばこう

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var tabs = document.querySelectorAll('#tab_list a');
3  var pages = document.querySelectorAll('#tabbody div');
4  [].forEach.call(tabs,function(x){
5    x.addEventListener('click',function(e){
6      var targetid=e.target.getAttribute("href");
7      [].forEach.call(pages,function(y){
8        y.style.display=("#"+y.getAttribute("id"))==targetid?"":"none";
9      });
10    });
11  });
12  tabs[0].click();
13});

HTML
1<div id="main">
2<h2 class="tab-bar">タブ切り替えメニュー</h2>
3<ul id="tab_list" class="clearfix">
4<li><a href="#tab1_box">タブ1</a></li>
5<li><a href="#tab2_box">タブ2</a></li>
6<li><a href="#tab3_box">タブ3</a></li>
7</ul>
8<div id="tabbody">  
9<div id="tab1_box" class="tabbox">
10タブ1の内容が表示されます。
11</div>
12<div id="tab2_box" class="tabbox">
13タブ2の内容が表示されます。
14</div>
15<div id="tab3_box" class="tabbox">
16タブ3の内容が表示されます。
17</div>
18</div>
19</div>