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>

js
1window.onload=function() {
2     
3/*--t対象要素を得る--*/
4     
5 tab.setup = {
6    tabs: document.getElementById('tab_list').getElementsByTagName('li'),
7    pages: [
8       document.getElementById('tab1_box'),
9       document.getElementById('tab2_box'),
10       document.getElementById('tab3_box')
11    ]
12 }
13 tab.init();
14 }
15   
16 var tab = {
17    init: function(){
18       var tabs = this.setup.tabs;
19       var pages = this.setup.pages;
20        
21 /*--タブの切り替え処理--*/  
22       for(i=0; i<pages.length; i++) {
23          if(i !== 0) pages[i].style.display = 'none';/*--コンテンツ要素を非表示に--*/
24           /*--タブ要素にクリックイベントを設定--*/
25          tabs[i].onclick = function(){ tab.showpage(this); 
26        return false; };
27       }
28    },
29   
30    showpage: function(obj){
31       var tabs = this.setup.tabs;
32       var pages = this.setup.pages;
33       var num;
34   
35       for(num=0; num<tabs.length; num++) {
36          if(tabs[num] === obj) break;
37       }
38   
39       for(var i=0; i<pages.length; i++) {		         
40        if(i == num) {
41             pages[num].style.display = 'block';
42             tabs[num].className = 'selected';
43          }
44          else{
45             pages[i].style.display = 'none';
46             tabs[i].className = null;
47          }
48       }
49    }
50 }
51

試したこと

途中までコメントで詳細を書いていましたが、これで合っているのでしょうか？

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

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

m.ts10806

2018/07/26 23:12

自分で実装したのものではないのでしょうか？自分が書いたコードを人に説明させるのはどうかと思います。ピンときていない自分でも分かっていないコードを書くことが間違いです。

m.ts10806

2018/07/26 23:14

コメントについては「ここはこういう意図でこの処理を書いている」といった形に切り替えてみてください。そうすると回答がつきやすくなると思います。

think49

2018/07/27 00:05

コメントは間違ってはいませんよ。分からない部分を具体化してください。

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

回答1件

ベストアンサー

init():

    init: function(){
       var tabs = this.setup.tabs;
       var pages = this.setup.pages;

       /*--タブの切り替え処理--*/  
       for(i=0; i<pages.length; i++) {
          if(i !== 0) pages[i].style.display = 'none';/*--コンテンツ要素を非表示に--*/
           /*--タブ要素にクリックイベントを設定--*/
          tabs[i].onclick = function(){
             tab.showpage(this); 
             return false;
          };
       }
    },

コメントの認識で概ね間違っては無いように見えます。
init()では初期処理として、タブを一旦全て非表示、切り替えリンククリック時のイベントを設定しているようです。

showpage():

    showpage: function(obj){
       var tabs = this.setup.tabs;
       var pages = this.setup.pages;
       var num;
   
       // クリックされたリンクが何番目かを調べてるようです。
       for(num=0; num<tabs.length; num++) {
          if(tabs[num] === obj) break;
       }
   
       for(var i=0; i<pages.length; i++) {
          if(i == num) {
             // ↑で調べたリンクの位置に対応するタブを表示
             pages[num].style.display = 'block';
             tabs[num].className = 'selected';
          } else {
             // クリックされたもの以外は非表示
             pages[i].style.display = 'none';
             tabs[i].className = null;
          }
       }
    }

各処理においてコメントを追記してみました。

教材を見ながら書いてみたとのことで、
タブの大まかな処理(表示したいタブ以外を非表示)関しては間違っては無いように見えます。

ただ、色々改善ができそうな箇所はあるように思うので、
世の中に出回ってるコードを読んで見て工夫してみてください。

投稿2018/07/27 02:43