- ベストアンサー
表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>
- m-----c
- お礼率77% (738/956)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
構造的に理解していなのでは？ とりあえずこんな感じで・・・ <script> function ChangeTab(obj,tabID) { var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="A") n.className=""; n=n.nextSibling; } obj.className="selected"; var n=document.getElementById("tabs").firstChild; while(n){ if(n.nodeName=="DIV") n.className="hide"; n=n.nextSibling; } document.getElementById(tabID).className=""; return false; } </script> <style> a:hover,a.selected{ color:#ffff00; } .hide{ display:none; } </style> <p> <a href="#" class="selected" onclick="return ChangeTab(this,'tab1');">1111</a> <a href="#" onclick="return ChangeTab(this,'tab2');">2222</a> <a href="#" onclick="return ChangeTab(this,'tab3');">3333</a> <a href="#" onclick="return ChangeTab(this,'tab4');">4444</a> <a href="#" onclick="return ChangeTab(this,'tab5');">5555</a> </p> <div id="tabs"> <div id="tab1"> <div class="information-newwarp">1111</div> </div> <div id="tab2" class="hide"> <div class="information-newwarp">2222</div> </div> <div id="tab3" class="hide"> <div class="information-newwarp">3333</div> </div> <div id="tab4" class="hide"> <div class="information-newwarp">4444</div> </div> <div id="tab5" class="hide"> <div class="information-newwarp">5555</div> </div> </div>
その他の回答 (2)
こんなのはどう？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>change tabmenu color</title> <body> <div> <a href="#tab1" class="tab1">1111</a> <a href="#tab2" class="tab2">2222</a> <a href="#tab3" class="tab3">3333</a> </div> <div> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> </div> <script type="text/javascript"> //@cc_on document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) { var o, p; var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var c; if (e.tagName != 'A') return; o = document.getElementById(e.getAttribute('href'/*@cc_on , 2 @*/).substr(1)); if (o) { p = o.parentNode.firstChild; do if (p.tagName == 'DIV') p.style.display = (o == p)? 'block' :'none'; while (p = p.nextSibling); p = e.parentNode.firstChild; do if (p.tagName == 'A') p.style.backgroundColor = (e == p)? '#f00' :''; while (p = p.nextSibling); } } , false); </script>
お礼
ありがとうございます。 これも参考にさせていただきます。
- askaaska
- ベストアンサー率35% (1455/4149)
なんか同じ質問ばかり繰り返すのね。 http://www.red.oit-net.jp/tatsuya/java/d_color2.htm を参考に。 // 指定箇所のみ表示のところで 文字色ならcolor、背景色ならbackgroundColorを設定するのよ。
お礼
ありがとうございます。
お礼
ありがとうございます。 自分で色々試してもできませんでした まずはこの構造を理解したいと思います。