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

解決済みの質問

displayがブラウザによって正しく表示されない

phpおよびhtmlに関する質問です。

今、tableを表示・非表示を表示ボタンと非表示ボタンを押すことで自由に開閉しようとしています。

document.getElementById('xxx').style.displayを使って書いているのですが、
ChomeやSafariでは正しくボタンを押すと開閉されるのですが、それ以外のブラウザIE、Firefox、Operaでは真っ白な画面が表示されるだけで上手く表示されません。

実際には以下の様に書いています。

<a href="javascript:document.getElementById('xxxx').style.display = ''">
<img src="aaaa.jpg" alt="表示する"/>
</a>

<a href="javascript:document.getElementById('xxxx').style.display = 'none'">
<img src="bbbb.jpg" alt="表示しない"/>
</a>

表示されるブラウザと表示されないブラウザの違いの一つとしてアドレスバー
にて、表示される方は同じアドレスが出ている状態でtableが表示されます。

表示されない方は、アドレスバーに「javascript:document.getElementById('xxxx').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

投稿日時 - 2013-04-27 11:33:39

QNo.8061678

困ってます

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

onclickのイベントハンドラから起動すればいいんじゃね

<a href="#" onclick="javascript:document.getElementById('xxxx').style.display = 'block'">
<img src="aaaa.jpg" alt="表示する"/>
</a>

<a href="#" onclick="javascript:document.getElementById('xxxx').style.display = 'none'">
<img src="bbbb.jpg" alt="表示しない"/>
</a>

投稿日時 - 2013-04-27 12:42:43

お礼

回答ありがとうございました。
おかげさまで、neko-tenさんの記して下さったやり方で対応することが無事出来ました。ありがとうございました。

投稿日時 - 2013-04-27 17:45:18

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

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

回答(3)

ANo.3

すいません、#1です
onclickなのにjavascript:を消してなかった・・・
hanabutakoさんのコードのほうがきれいですので、そちらを参考にしてくださいまし・・・

投稿日時 - 2013-04-27 12:59:54

ANo.2

ちらっと試した感じだと、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>

投稿日時 - 2013-04-27 12:44:17

補足

回答ありがとうございます。
ただ、これはボタン自体の表示・非表示化のように見えたのですが違いますでしょうか?

こちらの説明足らずで申し訳なかったです。
質問文でも書かせて頂いてた通り実際に表示したり表示しないのはボタンではなく、tableです。

それを表示するボタンを押すとtableが表示されて、表示しないボタンを押すとtableが消えるという仕組みなんです。

投稿日時 - 2013-04-27 14:09:06

あなたにオススメの質問