質問編集履歴

1 修正

tktktks

tktktks score 7

2018/07/27 03:07  投稿

jsでのタブの切り替えコードの説明
### 前提・実現したいこと
教材を見ながらタブの切り替え実装を行いました。
実装はできたのですがイマイチ全体的に「このコードは、このような処理をしている」というのが想像しづらいです。一まとまりずつ説明していただ間違えて覚えないように理解したいです。また途中まで自分でコメントで説明を書いて見たのですが合っていますでしょうか?よろしくお願いします。
実装はできたのですがイマイチ全体的に「このコードは、このような処理をしている」というのが想像しづらいです。一まとまりずつ説明していただ毛ないでしょうか?間違えて覚えないように理解したいです。また途中まで自分でコメントで説明を書いて見たのですが合っていますでしょうか?よろしくお願いします。
■■な機能を実装中に以下のエラーメッセージが発生しました。
### 発生している問題・エラーメッセージ
```
エラーメッセージ
```
### 該当のソースコード
```html
<div id="main">
           <h2 class="tab-bar">タブ切り替えメニュー</h2>
           <ul id="tab_list" class="clearfix">
             <li><a href="#tab1_box">タブ1</a></li>
             <li><a href="#tab2_box">タブ2</a></li>
            <li><a href="#tab3_box">タブ3</a></li>
          </ul>
           <div id="tabbody"> 
          <div id="tab1_box" class="tabbox">
            タブ1の内容が表示されます。
          </div>
          <div id="tab2_box" class="tabbox">
            タブ2の内容が表示されます。
          </div>
          <div id="tab3_box" class="tabbox">
            タブ3の内容が表示されます。
          </div>
             </div>
        </div>
```
```js
window.onload=function() {
   
/*--t対象要素を得る--*/
   
tab.setup = {
   tabs: document.getElementById('tab_list').getElementsByTagName('li'),
   pages: [
      document.getElementById('tab1_box'),
      document.getElementById('tab2_box'),
      document.getElementById('tab3_box')
   ]
}
tab.init();
}
  
var tab = {
   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; };
      }
   },
  
   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;
         }
      }
   }
}
```
### 試したこと
途中までコメントで詳細を書いていましたが、これで合っているのでしょうか?
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • JavaScript

    23311 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    13412 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る