こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

表示中のタブに色を付けたい

タブ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>

投稿日時 - 2009-03-16 09:19:59

QNo.4800764

すぐに回答ほしいです

質問者が選んだベストアンサー

構造的に理解していなのでは?
とりあえずこんな感じで・・・

<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>

投稿日時 - 2009-03-16 11:32:16

お礼

ありがとうございます。
自分で色々試してもできませんでした
まずはこの構造を理解したいと思います。

投稿日時 - 2009-03-16 15:23:07

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

こんなのはどう?
<!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>

投稿日時 - 2009-03-16 11:37:11

お礼

ありがとうございます。
これも参考にさせていただきます。

投稿日時 - 2009-03-16 15:24:05

ANo.1

なんか同じ質問ばかり繰り返すのね。

http://www.red.oit-net.jp/tatsuya/java/d_color2.htm
を参考に。
// 指定箇所のみ表示のところで
文字色ならcolor、背景色ならbackgroundColorを設定するのよ。

投稿日時 - 2009-03-16 09:37:50

お礼

ありがとうございます。

投稿日時 - 2009-03-16 15:22:04

あなたにオススメの質問