- ベストアンサー
JavaScriptでタブメニューを実装したいと思っています。
JavaScriptでタブメニューを実装したいと思っています。 http://archiva.jp/web/javascript/tab-menu.html 上記サイトよりソースを頂いて実装したいと考えているのですが、こちらのサイトでは5つタブがあるため配列を使用しています。 今回実装したいページは、タブが2つのみなので配列は必要ないかと思いました。 色々調べても勉強不足のためどうしても条件分岐に書き換える方法が分からなく行き詰ってしまったため、お力添え頂きたく質問させていただきました。 大変申し訳ないのですが、教えていただければありがたいです。 どうぞ宜しくお願い致します。
- macocco0718
- お礼率83% (5/6)
- JavaScript
- 回答数2
- ありがとう数15
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問の目的がよくわからないのですが、 単に配列を止めたいだけですか、いっそのことオブジェクト指向も 止めてシンプルにしたいとか？ こんなふうに、 <body> <ul id="tab"> <li class="present" onclick="showpage(this)"><a href="#page1">Page_1</a></li> <li onclick="showpage(this)"><a href="#page2">Page_2</a></li> </ul> <div id="page1">11111 11111 11111</div> <div id="page2">22222 22222 22222</div> <script type="text/javascript" charset="utf-8"> <!-- document.getElementById('page2').style.display = 'none'; function showpage(obj){ var tabs = document.getElementById('tab').getElementsByTagName('li'); var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var num; for(num=0; num<tabs.length; num++){ if(tabs[num] === obj) break; } if(num==0){ page1.style.display = 'block'; tabs[num].className = 'present'; page2.style.display = 'none'; tabs[num].className = 'null'; }else{ page1.style.display = 'none'; tabs[num].className = 'null'; page2.style.display = 'block'; tabs[num].className = 'present'; } } // --> </script> </body>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
2以上であれば（1つではタブにならないけれど）、わざわざ配列をはずすことも無いのではないでしょうか？ （2つでも配列を利用する価値はあります。） 将来、1つ増える可能性なども考えれば、そのまま利用するほうが懸命では？ どうしても2つ専用にしたければ、tabをあらわすflagでも用意して、 tab1.style.display = flag?"block":"none"; tab2.style.display = flag?"none":"block"; みたいにベタで書いてもいけるかと…
お礼
知識不足のため、もしかしたら配列が原因ではないかもしれません。。。 今回ソースは5つのタブですが、2つのタブにしたとたんIEでエラーが出てしまいました。 お忙しい中丁寧に教えていただき本当にありがとうございます。 JavaScriptを理解できるようにがんばって勉強致します。 本当にありがとうございます。
お礼
yyr446さま お世話になっております。 丁寧なスクリプトまで本当にありがとうございます。 なんとお礼を言っていいのか分かりません。。。 本当にありがとうございます。 今回配列を使っているからか、2つのタブだとIEでエラーが出てしまいこのような質問をさせてしまいました。 無事に実装することができました。 こちらをじっくり拝見させて頂いて勉強させて頂きます。 本当に本当にありがとうございました。