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/ツールのバージョンなど） |
| ここにより詳細な情報を記載してください。 |
