- ベストアンサー
クリック後、TABLEの幾つかのセルの色を変える
初めて質問させて頂きます。 現在ホームページを作成しています。 フレームでページを2分割して、片方がメニューバーのようなページでもう一つがメインページのような構成です。 こんな感じです。 <FRAMESET rows="20%,80%"> <FRAME name="top" src="menu.htm"> <FRAME name="bottom" src="top.htm"> <NOFRAMES> <BODY> <P>Please access this page by browser that supports the frame. </P> </BODY> </NOFRAMES> </FRAMESET> そしてmenu.htmにテーブでコンテンツを表示し、もう片方にTOP、PROFILE、BBS、DIARYとテーブルで仕切ってページを作成しています。 <TABLE border="1" bgcolor="gray"> <TBODY> <TR> <TD bgcolor="red"><A href="top.htm" target="bottom">TOP</A></TD> <TD><A href="profile.htm" target="bottom">PROFILE</A></TD> <TD><A href="bbs.htm" target="bottom">BBS</A></TD> <TD><A href="diary.htm" target="bottom">DIARY</A></TD> </TR> </TBODY> </TABLE> このとき、最初は"TOP"のセルがが赤くなっています。 ここでリンクとなっている"BBS"をクリックすると、そのセルの背景がredになり、その他のセルの背景はgrayのままで、次にDIARYをクリックするとDIARYのセルの背景がredになり、BBSはgrayになるというような事をやりたいのですが、良い方法はあるでしょうか？ ちなみにサーバの容量が非常に少ないので画像を使いたくないのですが、画像を使わざるを得ないでしょうか？ このカテゴリーで質問する内容では無いかもしれませんが、どなたか良いアドバイスを宜しくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
安直な方法ですが <script type="text/javascript"> <!-- function red(el){ document.getElementById("top").style.backgroundColor="gray"; document.getElementById("profile").style.backgroundColor="gray"; document.getElementById("bbs").style.backgroundColor="gray"; document.getElementById("diary").style.backgroundColor="gray"; el.style.backgroundColor="red"; } //--> </script> をヘッダ部分に挿入します。 ＴＤ部分を <TD id="top" bgcolor="red" onclick="red(this)"> <TD id="profile" onclick="red(this)"> <TD id="bbs" onclick="red(this)"> <TD id="diary" onclick="red(this)"> の様に変更します。 これで、できると思います。
その他の回答 (1)
- olda
- ベストアンサー率66% (2/3)
必要に応じて<script>～</script>内の ・ nPastId = "～"; の部分と メニューそれぞれにある ・ <td id="～"> 部分と ・ <a onclick="changeColor('～')"> 部分を修正してください。 <script language="javascript" type="text/javascript"> <!-- // 最初に選ばれているメニュー nPastId = "menu01"; function changeColor(nId) { if(document.getElementById) { document.getElementById(nPastId).style.backgroundColor = "gray"; document.getElementById(nId).style.backgroundColor = "red"; nPastId = nId; } } //--> </script> <table border="1" bgcolor="gray"> <tbody> <tr> <td bgcolor="red" id="menu01"><a href="top.htm" target="bottom" onclick="changeColor('menu01')">TOP</a></td> <td id="menu02"><a href="profile.htm" target="bottom" onclick="changeColor('menu02')">PROFILE</a></td> <td id="menu03"><a href="bbs.htm" target="bottom" onclick="changeColor('menu03')">BBS</a></td> <td id="menu04"><a href="diary.htm" target="bottom" onclick="changeColor('menu04')">DIARY</a></td> </tr> </tbody> </table>
お礼
こちらもご回答ありがとう御座いました！ 先程テストしましたが、こちらもばっちりです。 初期値にTOPのIDを持っていて（それが前回の値という感じになって）クリックされると前回の値が示すセルがgrayになり、クリックされたセルのIDのところがredになるという方法ですね。 あ！ そのクリックされたIDがPastIDになっていますね。 こちらの方法も非常にいい感じです。やはりgetElementById()を使用するんですね。 ありがとう御座いました。 モヤモヤが晴れて、本当にすっきりしました。
お礼
早速のご回答ありがとうございます！ 先程テストしてみましたが、ばっちりです。 私のやりたい事が、完璧に表現できました。 あ～すっきり！ ジャバスクリプトの関数はほとんど知らないので getElementById()なんていう関数があるとは知りませんでした！ クリックされたら全てを一度grayにして、IDの一致する所だけ色を変えるという方法ですね。 本当にありがとう御座いました。