- ベストアンサー
html内の記述を「表示」「隠す」の切り替え方法について
お世話になります。 HTMLの文章中に、フラッシュを挿入していますが、必要ない場合に「表示」「隠す」の処理をしたいと考えています。 ウィキペディアではよく利用されていますが、ソースが分かりません。 リファンレンスを探すにも、どう言ったワードで検索してよいのか・・ http://ja.wikipedia.org/wiki/Wikipedia:%E3%82%B5%E3%83%B3%E3%83%89%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9 これと同じような動きをするJavascriptのサンプルをご存知ないでしょうか？ よろしくお願いします。
- NeuronWhisper
- お礼率50% (69/138)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No2です。 ＞＞最初にdisplayをnoneに設定 ↑してないですよね？（表示されてる） <div id="hoge" style="display:none;"> CSSも覚えてね。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
No2です。 ＞でも、デフォルトで非表示だといいのですが、方法はありますか？ ANo2の最初に書いてあるように、単純にCSSのdisplay属性を切り替えているだけなので、最初にdisplayをnoneに設定しておいてあげればいいです。
補足
いろいろソースをいじってみたのですがわかりません。 こういうことでしょうか？ <html> <head> <script type="text/javascript"> function fuga(elm) { var flag = (elm.innerHTML=='隠す'); document.getElementById('hoge').style.display = flag?'none':'block'; elm.innerHTML = flag?'表示':'隠す'; } </script> </head> <body> <button onclick="fuga(this)">表示</button> <p> <div id="hoge"> なんたらかんたら説明文<br> 画像なんかもあったりして </div> </body> </html> 1さんのリンク先はソースが複雑で、２さんのソースがシンプルで分かりやすいのですが・・・よろしくお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
CSSのdisplayやvisibilityを切り替えてやっているのが多いみたい。 ＜参考まで＞ <html> <head> <script type="text/javascript"> function fuga(elm) { var flag = (elm.innerHTML=='表示'); document.getElementById('hoge').style.display = flag?'block':'none'; elm.innerHTML = flag?'隠す':'表示'; } </script> </head> <body> <button onclick="fuga(this)">隠す</button> <p> <div id="hoge"> なんたらかんたら説明文<br> 画像なんかもあったりして </div> </body> </html>
補足
fujillin様 シンプルでいいですね。 でも、デフォルトで非表示だといいのですが、 方法はありますか？
お礼
ようやく理解しました。 CSS、もうちょっと勉強します。 ありがとうございます。