表示/非表示の切り替え方法と要約文

2023/07/31 10:29

このQ&Aのポイント

JavaScriptを使用して、要素の表示/非表示を切り替える方法について説明します。
BBBが消えたスペースを空白にせず、AAAとCCCを詰めて表示する方法についても解説します。
さらに、HTMLとJavaScriptのコードの詳細な解説を行い、参考になる情報を提供します。

ベストアンサー

表示/非表示の切り替え

2005/02/23 14:16

AAA、BBB、CCCの３つが縦に並んでいるとします。ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'>  </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================

ps5550
お礼率65% (129/196)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/02/23 14:32 回答No.1

style.visibility ではなく style.display を使います消す時:'none' 表示する時:'inline'または'block'

質問者

お礼 2005/02/23 14:47

ありがとうございます。できました。助かりました。

関連するQ&A

onmouseoverの表示切り替えが上手くいかない
onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript">  </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>
- ベストアンサー
- JavaScript
CSSのID名に配列を使えませんか？
以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"></style> <script type="text/javascript"></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>
- ベストアンサー
- JavaScript
JavaScriptを利用しツリーメニューを作成していますが、
JavaScriptを利用しツリーメニューを作成していますが、ページを飛んで戻ってくるとメニューが閉じてしまいます。更新を押した場合も同じです。それを開いた状態に保っておきたいのです。ちなみにソースは、 <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> <HEAD> と最初に書いておいて、ツリーメニューを表示させたいところに、 <A href="javaScript:treeMenu('treeMenu1')">○○○</a><br> <DIV id="treeMenu1" style="display:none"> 　┣<A href="aaa.html">aaa</A><BR> 　┣<A href="bbb.html">bbb</A><BR> 　┗<A href="ccc.html">ccc</A><BR> </DIV> と書いてます。どこをどのように変えればよいですか？よろしくお願いします。また参考にさせて頂いたサイトも一緒に載せておきます。 http://javascript.eweb-design.com/0703_tm.html
- ベストアンサー
- JavaScript
画像メニューの開閉
JavaScriptで画像メニューの開閉を行いたいのですが、うまく動きません。「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、「bbb」を閉じるという１行を追加したら動かなくなりました。どなたかご教授願います。【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>
- ベストアンサー
- JavaScript
jQueryでdivごとリンクする際の開き方の指定
jQueryでdivごとリンクする際に新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。下にコードを載せています。素人なりにおかしいかと思っている点は、同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。どのように書いたらよいでしょうか？よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------
- ベストアンサー
- JavaScript
リンクレイヤー表示の切り替えについて
　もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。　ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。　リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript">  </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。初心者です。よろしくお願いします。下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。他のブラウザでは動きました。どうしてでしょう？悩んでいます。どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"> </div> </div> 　　</body> </html>
- ベストアンサー
- JavaScript
innerHTMLにて設定した情報を再度取得する事は可能でしょうか？
innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？下記のコードを考えてみたのですが、再取得出来ません。環境はXPでIE6とFF3です。ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <div id="test1"></div> <div id="test2">　</div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript">  </script> </body> </html>
- ベストアンサー
- JavaScript
hiddenを使って項目の表示、非表示を切り替えたいのですが
素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。 <---A---><--B--><-C-><--D-->といった形で表示されているものを、例えばBとCを非表示にして <---A---><--D-->のように表示する又はAとCを非表示にして <--B--><--D-->といった形で表示出来ないでしょうか <div class="A">A <div class="B">B <div class="c">C <div class="d">D 以下やってみたのですが <script type="text/javascript"> function hidden_Disp() { document.getElementById("B").style.visibility = "hidden"; document.getElementById("C").style.visibility = "hidden"; } </script> でやってみましたが駄目です。何卒宜しく御願い致します。
- ベストアンサー
- JavaScript
ネスケ6以上でも動作させたいのですが・・・・・
ネスケ６からlayerがサポートされていないということなのですが、以下をどう書き直せば、ネスケ6以上でも動作するようになるのでしょうか？単純にgetElementByIdに置き換えても動かないですよね・・・・力不足(T_T) どなたかお助けお願いいたします。 <STYLE TYPE="text/css">  </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <P><IMG src="image.gif" border="0" width="285" height="39"></P> <DIV ID="menu1"> <A HREF="function voi(){};voi()" onClick="pullDownMenu('tag1');return false">わんにゃん</A> </DIV> <DIV ID="tag1"> <A href="dog.html"> わんこ </A><BR> <A HREF="cat.htm"> にゃんこ </A><BR> <A HREF="kitten.htm"> こにゃんこ </A><BR> </DIV> </BODY>
- ベストアンサー
- JavaScript