- ベストアンサー
displayがブラウザによって正しく表示されない
- 質問文章全体の長さは100文字程度です。問題はChomeやSafariでは正しくボタンを押すと開閉されるのですが、それ以外のブラウザIE、Firefox、Operaでは真っ白な画面が表示されるだけで上手く表示されないことです。
- ChomeやSafariでは正しくボタンを押すと開閉されますが、IE、Firefox、Operaでは真っ白な画面が表示され、tableが表示されません。アドレスバーに「javascript:document.getElementById('ｘｘｘｘ').style.display = ''」とそのままaタグの内容が表示されてしまいます。
- ページの読み込み時にjavascriptですべてのtableをnoneで表示しない設定にしており、この設定が全てのブラウザで適用されています。しかし、IEやFirefoxでもボタンの開閉が上手くできない状態です。各ブラウザのバージョンはChome: 26.0、Safari: 5.1.7、IE: 8.0、Firefox: 19.0.2、Opera: 12.15です。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
onclickのイベントハンドラから起動すればいいんじゃね <a href="#" onclick="javascript:document.getElementById('ｘｘｘｘ').style.display = 'block'"> <img src="aaaa.jpg" alt="表示する"/> </a> <a href="#" onclick="javascript:document.getElementById('ｘｘｘｘ').style.display = 'none'"> <img src="bbbb.jpg" alt="表示しない"/> </a>
その他の回答 (2)
- neko-ten
- ベストアンサー率55% (1287/2335)
すいません、#1です onclickなのにjavascript:を消してなかった・・・ hanabutakoさんのコードのほうがきれいですので、そちらを参考にしてくださいまし・・・
- hanabutako
- ベストアンサー率54% (492/895)
ちらっと試した感じだと、Firefox / IEだとjavascript:で関数呼び出し以外を書いたらダメみたいですね。一応、最近のIE / Firefoxだと関数呼び出しに変えると動くみたいですが、ダメだったらonclickしか無いでしょう。 関数を呼び出してみるコード: <html> <head> </head> <body> <script tyle="javascript"> function hide_xxx() { document.getElementById('xxx').style.display = 'none'; document.getElementById('xxx_clear').style.display = ''; } function unhide_xxx() { document.getElementById('xxx').style.display = ''; document.getElementById('xxx_clear').style.display = 'none'; } </script> <div id="xxx"> "消す"を押すとで消えます <a href="javascript:hide_xxx();">消す</a> </div> <a id="xxx_clear" href="javascript:unhide_xxx();" style="display: none">戻す</a> <br /> <a href="javascript:document.getElementById('xxx').style.display = '';">戻す (これだと動かない)</a> </body> </html> onclickを使った版: <html> <head> </head> <body> <script tyle="javascript"> function hide_xxx() { document.getElementById('xxx').style.display = 'none'; document.getElementById('xxx_clear').style.display = ''; } function unhide_xxx() { document.getElementById('xxx').style.display = ''; document.getElementById('xxx_clear').style.display = 'none'; } </script> <div id="xxx"> "消す"を押すとで消えます <a href="#" onclick="hide_xxx();">消す</a> </div> <a id="xxx_clear" href="#" onclick="unhide_xxx();" style="display: none">戻す</a> </body> </html>
補足
回答ありがとうございます。 ただ、これはボタン自体の表示・非表示化のように見えたのですが違いますでしょうか？ こちらの説明足らずで申し訳なかったです。 質問文でも書かせて頂いてた通り実際に表示したり表示しないのはボタンではなく、tableです。 それを表示するボタンを押すとtableが表示されて、表示しないボタンを押すとtableが消えるという仕組みなんです。
お礼
回答ありがとうございました。 おかげさまで、neko-tenさんの記して下さったやり方で対応することが無事出来ました。ありがとうございました。