- ベストアンサー
ボタンクリック時にボタンの状態を切り替える
AとBというボタン(画像)があります。それぞれのボタンは通常の状態とアクティブ状態の2つの画像があり AとBで計4つのボタンがあります。 初めの状態はAのボタンがアクティブ状態でAの内容がページ内のしかるべき場所に表示されています。 Bのボタンをクリックした際にはBのボタンがアクティブ状態になりAのボタンは通常状態に戻り Bの内容がinnerhtmlを使用してAの内容が表示されている場所にBの内容が表示されるというような感じにしたいのですが innerhtmlを使用してAとBの内容の切り替えはできたのですがAとBのボタンの状態の切り替え方がうまくできないのです。 どなたかサンプルをご提示していただきアドバイスいただけると助かります。 ちなみに今回はボタン2つで説明させていただきましたが 将来的にはボタンは10個位になる予定です。
- champl
- お礼率62% (20/32)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <body> <div id="btn"> <img src="kin.jpg" width="620" height="50" alt="kin.jpg" id="t0"> <img src="gin.jpg" width="620" height="50" alt="gin.jpg" id="t1"> <img src="dou.jpg" width="620" height="50" alt="dou.jpg" id="t2"> </div> <div id="txt"></div> <script type="text/javascript"> //@cc_on //全角空白は適当に変換のこと /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ var t = document.getElementById('btn'); var d = document.getElementById('txt'); var i = t.getElementsByTagName('img'); var r0 = /\.jpg$/; var r1 = /_r\.jpg$/; var text = { 't0':'これは１個目の画像のコメントです。', 't1':'これは２個目の画像のコメントです。', 't2':'これは３個目の画像のコメントです。' } d.innerHTML = text.t0; t./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var e = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; var c = 0; var o; if('IMG' == e.tagName) { while (o = i[c++]) { o.src = o == e ? o.src.match(r1) ? o.src: o.src.replace(r0,'_r.jpg'): o.src.replace(r1, '.jpg'); o.alt = o.src;//確認用 } d.innerHTML = text[e.id]; } }, false); }, false); </script>
その他の回答 (1)
- SortaNerd_
- ベストアンサー率59% (309/522)
面白そうだったので書いてみました。 自由度は高くしたつもりなので適に書き換えて使ってください。 <span id="buttonFoo"><img src="activebuttonFoo.png" onClick="activate('Foo')"></span> <span id="buttonBar"><img src="inactivebuttonBar.png" onClick="activate('Bar')"></span> <span id="buttonHoge"><img src="inactivebuttonHoge.png" onClick="activate('Hoge')"></span> <script> buttons=["Foo","Bar","Hoge"] function activate(which){ /**/ document.getElementById("button"+which).innerHTML=buttonhtml(which,true); /**/ for(i=0;i<buttons.length;i++){ /**/ /**/ if(buttons[i]!=which){ /**/ /**/ /**/ deactivate(buttons[i]); /**/ /**/ } /**/ } } function deactivate(which){ /**/ document.getElementById("button"+which).innerHTML=buttonhtml(which,false); } function buttonhtml(which,isactive){ /**/ if(isactive) /**/ /**/ return "<img src=\"activebutton"+which+".png\" onClick=\"activate('"+which+"')\">"; /**/ else /**/ /**/ return "<img src=\"inactivebutton"+which+".png\" onClick=\"activate('"+which+"')\">"; } </script>
